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 () {
  return {
    age: "",
  }
},
watch: {      
  age: function (newAge) {
    console.log("log here")
  }

但在为select添加默认值时，我开始出现此错误：

/~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0中的错误！./~/vue-loader/lib/selector.js?type=template

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

@./~/babel loader/~/vue加载程序/lib/selector.js？类型=脚本

@./src/router/index.js

@./src/app.js

@./src/client-entry.js

@多应用程序

我试图在组件的数据部分也给出默认值，但是什么也没发生。我也尝试了v-bind，但后来观察者停止了对年龄变量的研究。




Answer 1

对于占位符，您需要将value属性设置为与在状态中定义为初始值相同的值。

更改禁用选项

<option value="null" disabled selected hidden>Select Age</option>

在州里做这样的事

data () {enter code here
  return {
    age: null,
  }
}

Answer 2

唯一需要做的就是从默认的选项中删除选中的：

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

Answer 3

对于其他可能在这个问题上发言的人，我还有一个额外的步骤来显示默认选项。在我的例子中，我绑定到的v-model返回的是null，而不是空字符串。这意味着一旦启动Vue绑定，就不会选择默认选项。

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

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

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