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

Question

我在 Vue.js 中创建了一个带有 v-repeat 的下拉菜单，并且我有一个当前值，我需要将 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

我认为你可以这样做：

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

Answer 2

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

运行我自己进入这个问题。用这个解决了。

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

要应用动态列表并应用选择：

   new Vue({
     el: '.panel.apps',
     data: {
       apps: ['one', 'two', 'three', 'four'],
       selected: 'three'
     }
   })

HTML selected=selected 或 selected shorthand 仅在 item 与 selected

匹配时写入

<select v-model='selected'>
  <option v-for='item in apps' 
          v-bind:selected="item == selected" 
          :value="item">{{ item }}</option>
</select>

Answer 5

在 Vue 2 中，您似乎无法按预期设置 :selected="option == test"。我相信这是由于 v-model 用法的性质造成的。您需要将绑定 v-model="model.selected" 明确设置为您希望预选的选项。您可以在安装的回调中执行此操作：

mounted () {

    this.model.selected = "my default";

},

在此示例中，我的选项值包括 "my default"。

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

How to preselect current value in a select created with v-repeat in Vue.js?

vue.js