vuejs 2.0.0 中选择的占位符

Question

我正在使用 vuejs 2.0 创建一个 webapp。我使用以下代码创建了简单的选择输入：

   <select v-model="age">
    <option value="" disabled selected hidden>Select Age</option>
    <option value="1"> 1 Year</option>
    <option value="11"> 11 Year</option>
  </select>

我在 Vue 组件的 data 中有这个：

 data () {
  return {
    age: "",
  }
},
watch: {
  age: function (newAge) {
    console.log("log here")
  }

但是在为选择添加默认值时我开始收到此错误：

.//vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!.//vue-loader/lib/selector.js?type=template&index=0!./src/ 中的错误components/cde.vue 模板语法错误：使用 v-model 时将忽略内联选定属性。改为在组件的数据选项中声明初始值。

@ ./src/components/cde.vue 10:23-151

@ .//babel-loader!.//vue-loader/lib/selector.js? type=script&index=0!./src/views/abcView.vue @ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@多应用

我也尝试在组件的数据部分中提供默认值，但没有发生任何事情。我也试过 v-bind 但后来观察者停止了年龄变量的工作。

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

唯一需要做的就是从默认值 --- 中删除 selected option ：

  <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对于可能遇到此问题的其他人，我还有一个额外的步骤可以让默认选项出现。就我而言，我绑定的 v-model 返回的是 null 而不是空字符串。这意味着一旦启动 Vue 绑定，就永远不会选择默认选项。

为了解决这个问题，只需将默认选项的 value 属性绑定到 null ：

 <select v-model="age">
  <option :value="null" disabled>Select Age</option>
  ...
</select>

http://jsfiddle.net/2Logme0m/1/

原文由 Albert Martin 发布，翻译遵循 CC BY-SA 3.0 许可协议