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

Question

我试图在内部循环中获得外部循环的键。试图获得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"},
]
},
]

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