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-repeat代替： http://codepen.io/anon/pen/LpZBom

v-model并选择多个

1 个答案: