在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>

我在data我的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&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

@多app

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

Answer 1

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

要解决此问题,value请将默认选项的属性简单绑定到null:

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

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

Answer 2

唯一需要解决的问题是selected从默认情况下删除option:

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

Answer 3

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

更改您的禁用选项

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

并在状态下做这样的事情

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

Answer 4

以 Shivam Bisht 为基础，以防您无法访问默认值。只需将 value="undefined" 添加到您的占位符选项标签即可。

占位符文本

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      param: undefined,
    };
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select v-model="param">
    <option value="undefined" disabled>Placeholder text</option>
    <option value="1">Dutch woman are beautiful.</option>
    <option value="11">German Men are slow.</option>
  </select>
</div>