v-model 并选择多个 [英] v-model and select multiple

问题描述

我认为有以下代码:

<label>艺术家:</label><选择多个名称=艺术家[]"v-model="artist_ids"id="艺术家"><option v-repeat="艺术家"value="@{{ id }}">@{{ 姓名 }}</选项></选择>

然后我用 ready() 中调用的方法填充 artist_ids 变量.

不过，当我查看结果页面时，我在艺术家下拉列表中没有看到任何选择.可以确认 artist_ids 已正确填充，当我在控制台中向其推送另一个 id 时，Vue 确实会选择它并选择它应该的所有艺术家.

我做错了什么?如何让 v-model="artist_ids" 在页面加载之前从下拉列表中适当地选择?

解决方案

您可以使用内置的 options 属性来呈现选项，而不是使用 v-repeat 循环列表.只需确保您的数据格式正确即可.

示例:

数据:{selected_artists: [ 5678 ],艺术家:[{ text: 'Some Artist', value: 1234 },{ 文本:'另一位艺术家'，值:5678 }]}

然后您可以使用内置选项渲染:

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

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

I have the following code in my view:

<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> 

and I populate the artist_ids variable with a method called in ready().

When I look at the resultant page though, I see nothing selected in the artists dropdown. artist_ids can be confirmed to be correctly populated though, and when I push another id to it in the console, Vue does pick up on this and select all the artists that it should.

What am I doing wrong? How can I get v-model="artist_ids" to select from the dropdown appropriately before the page loads?

解决方案

You can use the built-in options attribute to render the options, rather than looping the list with v-repeat. Just make sure your data is formatted appropriately.

Example:

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

You can then use the built in options rendering:

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

Here's a codepen which also shows using v-repeat instead: http://codepen.io/anon/pen/LpZBom

这篇关于v-model 并选择多个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！