如何在Vue.js中使用v-repeat创建的选择中预选当前值？

Question

我v-repeat在Vue.js中创建了一个下拉菜单,我有一个当前值,我需要将selected属性添加到select标记中.似乎v-if只能用于控制标签,而不能用于控制属性.

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

这是用于创建下拉列表的对象:

{
   "name": "flavors",
   "current_value": "strawberry",
   "proposed_values": [
     "vanilla",
     "strawberry",
     "lemon"
  ]
}

有没有办法做到这一点,不会强迫我像这样的对象猴子？

{
   "name": "flavors",
   "proposed_values": [
     {"name": "vanilla", "selected": ""}
     {"name": "strawberry", "selected": "selected"}
     {"name": "lemon", "selected": ""}
  ]
}

我正在使用Vue 0.11.10.

Answer 1

在Vue 1.0及更高版本中,您可以执行此操作

<div id="app">
    <select v-model="selected">
        <option value="val1">Text1</option>
        <option value="val2">Text2</option>
        <option value="val3">Text3</option>
        <option value="val4">Text4</option>
        <option value="val5">Text5</option>
    </select>
</div>

和

new Vue({
    el: '#app',
    data: {
     selected: 'val3'
    }
});

那么,当我们设置模型时,将在下拉列表中自动选择数据中的选定值.我不知道它是否适用于旧版本,因为我从1.0开始

注意:Vue.js太棒了:)

Answer 2

我自己也遇到了这个问题。用这个解决了。

<select v-model="select">
  <template v-for="option in options">
    <option v-bind:value="option" v-bind:selected="option == savedOption">{{ option }}</option>
  </template>
</select>

Answer 3

我认为你可以做这样的事情：

<option v-repeat="proposed_value: proposed_values" 
    value="{{ proposed_value }}"
    selected="{{ proposed_value == current_value ? 'true' : 'false' }}"
>
    {{ proposed_value }}
</option>