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.
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>
Yes, if you want something to be pre-selected, you have to set the value like
this.age="1"
, which results in "1 Year" to be selected automatically when the DOM renders.