如何在 Vue.js 中使用 v-repeat 创建的选择中预选当前值? [英] How to preselect current value in a select created with v-repeat in Vue.js?
本文介绍了如何在 Vue.js 中使用 v-repeat 创建的选择中预选当前值?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 Vue.js 中使用 v-repeat
创建了一个下拉菜单,并且我有一个当前值,我需要将 selected
属性添加到 <代码>选择代码>标签.好像v-if
只能用来控制标签,不能控制属性.
I create a drop-down menu with v-repeat
in Vue.js, and I have a current value where I need to add the selected
property to the select
tag. It seems that v-if
can only be used to control tags, but not properties.
<select name="flavor">
<option value=""></option>
<option v-repeat="proposed_value: proposed_values" value="{{ proposed_value }}">{{ proposed_value }}</option>
</select>
我需要这样的东西:
<option v-repeat="proposed_value: proposed_values"
value="{{ proposed_value }}"
{{ proposed_value == current_value ? 'selected' }}
>
{{ proposed_value }}
</option>
这是用于创建下拉列表的对象:
This is the object used to create the drop-down:
{
"name": "flavors",
"current_value": "strawberry",
"proposed_values": [
"vanilla",
"strawberry",
"lemon"
]
}
有没有办法做到这一点而不强迫我像这样玩弄对象?
Is there a way to do this that does not force me to monkey with the object like this?
{
"name": "flavors",
"proposed_values": [
{"name": "vanilla", "selected": ""}
{"name": "strawberry", "selected": "selected"}
{"name": "lemon", "selected": ""}
]
}
我使用的是 Vue 0.11.10.
I am using Vue 0.11.10.
推荐答案
我认为你可以这样做:
<option v-repeat="proposed_value: proposed_values"
value="{{ proposed_value }}"
selected="{{ proposed_value == current_value ? 'true' : 'false' }}"
>
{{ proposed_value }}
</option>
这篇关于如何在 Vue.js 中使用 v-repeat 创建的选择中预选当前值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文