javascript - 在 vuejs 2.0.0 中选择的占位符

Question

我正在使用 vuejs 2.0 创建一个网络应用程序.我使用以下代码创建了简单的选择输入:

  <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")
  }

但是在为 select 添加默认值时我开始遇到这个错误:

ERROR in ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cde.vue template syntax error : inline selected attributes on will be ignored when using v-model. Declare initial values in the component's data option instead.

@ ./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

@ multi app

我也尝试在组件的数据部分提供默认值，但没有任何反应。我也尝试了 v-bind，但随后 watchers 停止处理 age 变量。

Answer 1

对于可能遇到此问题的其他人，我还需要执行一个额外的步骤才能显示默认选项。在我的例子中，我绑定(bind)的 v-model 返回的是 null 而不是空字符串。这意味着一旦 Vue 绑定(bind)启动，就不会选择默认选项。

要解决这个问题，只需将默认选项的 value 属性绑定(bind)到 null:

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

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