placeholder for select in vuejs 2.0.0

Question

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.

Answer 1

For others who may be landing on this question, there was an additional step for me to get the default option to appear. In my case, the v-model I was binding to was returning null and rather than an empty string. This meant that the default option was never selected once Vue bindings kicked in.

To solve for this, simple bind the value property of your default option to null:

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

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