2016-11-16 92 views
0

目標:選擇選擇標籤的多個選項。Vue js:多個選項選擇

嘗試:documentation說:實現一個多選擇輸入,使用v-model應的陣列結合的性質。

錯誤: [Vue警告]:期望一個數組的值綁定,但得到了字符串。

綁定到(multipleSelections)的值是一個數組,那麼這是什麼原因?

這裏是jsfiddle

腳本:

new Vue({ 
el:'#app', 
data: function() { 
    return { 
     multipleSelections: ["Mr Potato (Manager)"], 
     data: null, 
     multiple: "true", 
     assets:["Mr Potato (Manager)", "Mr Blade (Manager)", "Mrs Spice (Manager)"] 
    } 
    }, 
    created() { 
    console.log("selections: ",this.multipleSelections); 
    } 
}); 

HTML:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
<div class='container' id='app'> 
    <h2>{{"title".toUpperCase()}}</h2> 
    <p class='center help-text' v-if="multiple === 'true'">(Use ctrl or cmd to select multiple)</p> 
    <select 
    :multiple="multiple === 'true'" 
    v-bind:class="{ 'fix-height': multiple === 'true' }" 
    v-model="multipleSelections" 
    > 
    <option 
     v-for="asset in assets" 
     :value="asset"> 
     {{asset}} 
    </option> 
    </select> 
{{ multipleSelections }} 

回答

1

在選擇作品只是給multiple="true"。這裏是jsfiddle link

<select 
     multiple="true" 
     v-bind:class="{ 'fix-height': multiple === 'true' }" 
     v-model="multipleSelections" 
     > 
+0

謝謝,我會接受這個答案,儘管我已經使用了這個表達式,以便我可以使用這個組件用於單一和多選擇使用。任何想法我可以做到這一點? –

+0

@AmreshVenugopal不知道爲什麼這不起作用,我嘗試了很多方法,如果我發現相關的東西會回覆你。 – Saurabh