V模型和選擇多個

Question

我有我的看法如下代碼：

<div class="item_editor_line"> 
    <label>Artist(s): </label> 
    <select multiple 
      name="artists[]" 
      v-model="artist_ids" 
      id="artists"> 
     <option v-repeat="artists" 
       value="@{{ id }}"> 
       @{{ name }} 
     </option> 
    </select> 
</div> 

，我填充artist_ids變量，一個名爲ready()方法。

當我得到的頁面看起來雖然，我什麼也看不到在藝術家下拉選擇。 artist_ids雖然可以被確認爲正確填充，但當我在控制檯中向其中推入另一個ID時，Vue確實會選擇它並選擇它應該使用的所有藝術家。

我在做什麼錯？在頁面加載之前，我怎樣才能在下拉菜單中選擇v-model="artist_ids"？

Answer 1

您可以使用內置的options屬性來呈現選項，而不是使用v-repeat循環列表。只要確保您的數據格式正確。

例子：

data: { 
    selected_artists: [ 5678 ], 
    artists: [ 
     { text: 'Some Artist', value: 1234 }, 
     { text: 'Another Artist', value: 5678 } 
    ] 
} 

然後，您可以使用內置的選項渲染：

<select multiple name="artists[]" v-model="selected_artists" options="artists"></select> 

這裏有一個codepen這也顯示了使用V-重複來代替： http://codepen.io/anon/pen/LpZBom