javascript - v-model 并选择多个

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>

这是一个代码笔，它也显示使用 v-repeat 代替:
http://codepen.io/anon/pen/LpZBom