vue js - check one radio button by default - laravel

Question

In each set of group I wants to select one radio input by default.
each menu have multiple items. user need to select one item from each menu. so, I'm trying to select one item by default. How can I do that?
<div v-for="menu in menus">
<h4>#{{ menu.name }}</h4>
<div v-for="item in menu.menuitems">
<input type="radio" v-model="selected_items[menu.id]" :value="item" :key="item.item_id"> #{{ item.name }}
</div>
</div>

Answer 1

Firstly, you need to set a name attribute to the radio buttons in each menu, so that only one can be selected at a time.
And to set the first item of each menu as selected, you can use v-for index like:
<div v-for="item in menu.menuitems">
<input type="radio" v-model="selected_items[menu.id]"
:value="item.id"
:name="menu.id"
:key="item.item_id"> #{{ item.name }}
</div>
You will also need to update radio button :value from items to item.item_id and also modify :key="items.item_id" to :key="item.item_id". I think this was typo, as no variable exists in this scope like items.
and then inside mounted vue instance or any initial function inside methods you can set the values for each group item like:
mounted: function() {
this.menus.forEach(function(menu) {
this.selected_items[menu.id] = this.menu.menuitems.length ? this.menu.menuitems[0].id : null;
})
}
assuming menuitems[0] in an object with properties like item_id & name
You can still get selected item for each menu like:
this.menus.forEach(function(menu) {
var selectedItem = this.menu.menuitems.find(m => m.id == this.selected_items[menu.id]);
console.log(selectedItem)
// Retursn { id: xxx, name: 'xxx' }
})