Set default value to option select menu
You can just use v-model
for selecting a default value on a select box:
Markup:
<div id="app">
<select v-model="selected">
<option value="foo">foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
</div>
View Model:
new Vue({
el: "#app",
data: {
selected: 'bar'
}
});
Here's the JSFiddle: https://jsfiddle.net/Lxfxyqmf/
html:
<div id="myComponent">
<select v-model="selectedValue">
<option v-for="listValue in valuesList" :value="listValue">
{{listValue}}
</option>
</select>
<span>Chosen item: {{ selectedValue }}</span>
</div>
js:
var app = new Vue({
el: '#myComponent',
data: {
selectedValue: 'Two',
valuesList: ['One', 'Two', 'Three']
},