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> 

然后使用在ready()調用的方法填充artist_ids變量。

但是，當我查看結果頁面時，在藝術家下拉列表中沒有任何選擇。 artist_ids可以確認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>

這是一個代碼筆，也顯示了使用v-repeat： http ://codepen.io/anon/pen/LpZBom