I have a select and options in my form but i would like to prepopulate the select with old selected data but i can't seem to get it to work.
Here is my code
<select name="holding_id" v-model="service.holding_id">
<option value="">Select a holding group</option>
<option v-for="holding in holdings" v-bind:key="holding.id" v-bind:value="holding.id">
{{ holding.holding_name }}
</option>
</select>
I am thinking using javascript ternary would make sense
You can try like following snippet:
new Vue ({
el: "#demo",
data() {
return {
holdings: [{id: 1, holding_name: 'aaa'}, {id: 2, holding_name: 'bbb'}, {id: 3, holding_name: 'ccc'}],
service: {holding_id: 2}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<select name="holding_id" v-model="service.holding_id || ''">
<option value="" disabled>Select a holding group</option>
<option v-for="holding in holdings" v-bind:key="holding.id" v-bind:value="holding.id">
{{ holding.holding_name }}
</option>
</select>
</div>