vue js - отметьте один переключатель по умолчанию

Question

В каждом наборе группы I по умолчанию необходимо выбрать один радиовход.

в каждом меню есть несколько пунктов. пользователь должен выбрать один пункт из каждого меню. поэтому я пытаюсь выбрать один элемент по умолчанию. Как я могу это сделать?

<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

1. Во-первых, вам необходимо установить атрибут name для переключателей в каждом меню, чтобы можно было выбрать только один.

2. И установить первый элемент каждого выбранного меню, вы можете использовать v-for индекс, например:

   <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>
   

Вам также необходимо обновить переключатель :value с items до item.item_id а также изменить :key="items.item_id" на :key="item.item_id". Я думаю, что это была опечатка, так как в этой области не существует никакой переменной, такой как items.

, а затем внутри mounted vue экземпляра или любой начальной функции внутри methods, вы можете установить значения для каждой группы например,

mounted: function() {
   this.menus.forEach(function(menu) {
      this.selected_items[menu.id] = this.menu.menuitems.length ? this.menu.menuitems[0].id : null;
   })
}

при условии menuitems[0] в объекте со свойствами, такими как item_id & name

Вы можете получить выбранный элемент для каждого меню, например:

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' }
})