如何在 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"
  ]
}

有没有办法做到这一点我使用的是 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 创建的选择中预选当前值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！