是否可以在嵌套循环中获取外部循环的键？ VueJs答案

【问题标题】：Is it possible to get outer loop's key inside a nested loop? VueJs是否可以在嵌套循环中获取外部循环的键？ VueJs
【发布时间】：2021-05-03 23:14:14
【问题描述】：

我试图在内部循环中获取外部循环的密钥。尝试使用selected[item.key] 获取单选按钮值，但它不起作用。有可能得到外循环的密钥吗？或者这是获得单选按钮值的更好方法吗？我遇到的问题是我试图将外循环键作为selected 的索引来存储答案

<div v-for="(item,key) in items" :key="key">
 <div> {{ item.title }}</div>

 <div class="selections">  
   <div v-for="(selection,key) in item.selection" :key="key">
     <input type="radio" 
            v-model="selected[item.key] 
            :name=item.name" 
            :value="selection.name">
     <label :for="selection.name">{{selection.name}}</label
   </div>
 </div>
</div>

selected 是一个准备好存储这些数据的数组。

item:[
   {name:"item1",id:"1",selection:[
                                   {id:1,name:"selection1"},
                                   {id:2,name:"selection2"},
                                   {id:3,name:"selection3"},
                                  ]
   },
   {name:"item2",id:"2",selection:[
                                   {id:1,name:"selection1"},
                                   {id:2,name:"selection2"},
                                   {id:3,name:"selection3"},
                                  ]
   },
   {name:"item3",id:"3",selection:[
                                   {id:1,name:"selection1"},
                                   {id:2,name:"selection2"},
                                   {id:3,name:"selection3"},
                                  ]
   },

]

【问题讨论】：

你的 v-model 有 selected 但在 v-for 它的 selection 是这个问题吗？

标签： vue.js vuejs2

【解决方案1】：

试试这个：

<div v-for="item in items" :key="item.id">
   <div> {{ item.title }}</div>

   <div class="selections">  
      <div v-for="selection in item.selection" :key="selection.id">
         <input type="radio" 
               v-model="selected.find(({ id }) => id === item.id).name" 
               :name="item.name" 
               :value="selection.name">
         <label :for="selection.name">{{selection.name}}</label>
      </div>
   </div>
</div>

或者如果你想选择选择：

<div v-for="item in items" :key="item.id">
   <div> {{ item.title }}</div>

   <div class="selections">  
      <div v-for="selection in item.selection" :key="selection.id">
         <input type="radio" 
               v-model="item.selection.find(({ id }) => id === selection.id).name" 
               :name="item.name" 
               :value="selection.name">
         <label :for="selection.name">{{selection.name}}</label>
      </div>
   </div>
</div>

【讨论】：