[英]v-model and select multiple
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()
. 然后使用在
ready()
调用的方法填充artist_ids
变量。
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. artist_ids
可以确认artist_ids
已正确填充,当我在控制台中向其推送另一个ID时,Vue会对此进行选择,并选择所有应该的艺术家。
What am I doing wrong? 我究竟做错了什么? How can I get
v-model="artist_ids"
to select from the dropdown appropriately before the page loads? 如何在页面加载之前让
v-model="artist_ids"
从下拉菜单中进行适当选择?
You can use the built-in options
attribute to render the options, rather than looping the list with v-repeat
. 您可以使用内置的
options
属性来呈现选项,而不是使用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-repeat: http ://codepen.io/anon/pen/LpZBom
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.