<select class="form-control" name="template" v-model="selected">
<option v-for="item in inventory" v-bind:value="item">
{{ item.name }}
</option>
</select><select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span><select v-model="selected">
<!-- inline object literal -->
<option v-bind:value="{ number: 123 }">123</option>
</select>new Vue({
el: '#app',
data: function() {
return {
selectedFlavor: 'lime',
flavors: ['blueberry', 'lime', 'strawberry']
}
},
methods: {
change: function() {
this.selectedFlavor = 'strawberry';
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<button @click="change()">Set Strawberry</button>
<select v-model="selectedFlavor">
<option v-for="flavor in flavors" :value="flavor">{{flavor}}</option>
</select>
</div>