Vue JS-默认情况下选中一个单选按钮

Question

在每个组中，我想默认选择一个单选输入。

每个菜单都有多个项目。用户需要从每个菜单中选择一项。因此，我尝试默认选择一项。我该怎么办？

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