My HTML:
<select id='select-id' v-model='position'>
<option>Opt 1</option>
<option>Opt 1</option>
</select>
The Vue component:
var app = new Vue({
el: '#elementid',
data: {
name: '',
position: 'Select Option',
},
});
When they select an option, I'm using v-model to send that value to the data variable 'name' (will be using this for other things).
However, visually, the select box is blank until I open it and select an option. If I remove the v-model it works as usual with Option 1 being visiable as the preselected option. I've even tried presetting the 'name' to 'Select Option'. I've tried using the html5 'selected disabled' attributes.