Warm tip: This article is reproduced from serverfault.com, please click

placeholder for select in vuejs 2.0.0

发布于 2016-11-02 08:44:06

I am creating a webapp using vuejs 2.0. I have created simple select input using following code:

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

and I have this in data of my Vue component:

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

But I start to get this error when adding default value for 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

I tried to give default value in the data section of the component as well, but then nothing happened. I tried v-bind also but then watchers stopped working on age variable.

Questioner
Saurabh
Viewed
0
Saurabh 2016-11-02 21:38:17

The only thing needed to work this was remove selected from default option:

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