首页 文章

在vuejs 2.0.0中选择的占位符

提问于
浏览 次
14

我正在使用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")
  }

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

错误在./~/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 @ multi app

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

javascript select vue.js vuejs2

2 回答

  • 19

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

    <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>
    回复于
  • 15

    对于可能登陆此问题的其他人，我还有一个额外步骤可以显示默认选项 . 在我的情况下，我绑定的 v-model 正在返回 null 而不是空字符串 . 这意味着一旦Vue绑定启动，就永远不会选择默认选项 .

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

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

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

    回复于

相关问题