时间戳

首页 > 解决方案 > 在 Vue 中，当 select 元素的选项不能立即可用时，初始状态会根据是使用 v-model 还是 value/input 绑定而有所不同

vue.js - 在 Vue 中，当 select 元素的选项不能立即可用时，初始状态会根据是使用 v-model 还是 value/input 绑定而有所不同

问题描述

看下面这两个选择，它们之间唯一的区别是第二个是使用值绑定和输入事件绑定。填充选项数组后，它们的值应该相同（'Two'），但这不是我所看到的。

当然，如果我们使用下拉菜单更改值，那么一切正常。但初始状态不同。我读到 v-model 是 v-bind:value 和 v-on:input 的语法糖，但似乎并非如此。

在我的情况下，我不能使用 v-model （值不能直接设置，所以我需要使用值/输入绑定）。有什么建议么？

console.clear()

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options: []
  }
})
app.options = [
    { text: 'One', id: 1 },
    { text: 'Two', id: 2 },
    { text: 'Three', id: 3 }
];
<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="app">

  <select v-model="x">
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
  </select>
  <span>{{ x }}</span>
  
  <br>
  
  <select :value="x" @input="x = $event.target.value">
    <option v-for="o in options" :value="o.id">{{ o.text }}</option>
  </select>
  <span>{{ x }}</span>
</div>

标签： vue.jsselect

解决方案

更新：

如果您真的需要这种方式，您可以解决问题，selected但将您的 Vue 版本更新到最新版本，因为您使用的版本仍然存在问题。

<select :value="x" @input="x = $event.target.value">
  <option v-for="o in options" :value="o.id" :selected="x===o.id">{{ o.text }}</option>
</select>

完整的例子在这里

原来的：

您的绑定一切正常。您应该在创建 Vue 实例之前获取选项，然后将其放入data

let options = [
  { text: 'One', id: 1 },
  { text: 'Two', id: 2 },
  { text: 'Three', id: 3 }
]

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options
  }
})

或者使用常规的 Vue 生命周期钩子，比如created在那个时候获取选项

let app = new Vue({
  el: '#app',
  data: {
    x: 2,
    options: []
  },
  created () {
    this.options = [
      { text: 'One', id: 1 },
      { text: 'Two', id: 2 },
      { text: 'Three', id: 3 }
    ]
  }
})

推荐阅读