Html 如何使具有相同值的单选按钮可重复使用？

我是Vue的初学者，在实践中学习。我能够使复选框可重复使用，但单选按钮得到了一些奇怪的结果。 我在

ProgramDesign.vue

中有数组格式的数据：

data（）{
返回{
战略：[
“不重要”，
“稍微重要”，
“中等重要”，
“非常重要”，
“极其重要”，
],
};
},

这些选项在每个问题上都会重复。 我为收音机制作了一个单独的组件，如下所示：

{{策略}
导出默认值{
道具：{
组：数组，
},
};

这就是它在

程序设计.vue中的使用方式：

第一个问题在这里

第二个问题在这里


我能够得到可重用的输出，但是当我点击第二个问题的单选按钮时，第一个问题的按钮被选中。如何解决此问题？
问题在于
输入
ID和名称在组件实例之间不是唯一的，这可以从两个
RadioButton
组件的呈现中看出（为简洁起见简化）：


不重要
不重要

每个
标签
通过匹配
for
和
id
属性链接到
输入
，这样单击
标签
会导致链接的无线电
输入
更改值。当存在多个具有相同标识符的
输入
时，浏览器会将
标签
链接到第一个匹配的
输入
，从而导致您观察到的行为

名称
在组之间也必须是唯一的（
RadioButton
实例），因为浏览器会创建具有匹配名称的
输入
的单选组

解决方案
或者，可以通过将
输入
放在
标签
内，解析
id
/
进行复制（并提高可读性），链接
标签
和
输入
：


不重要

解决重复的
name
s的一种方法是根据每个实例递增的计数器来确定名称：


{{策略}
设groupId=0
导出默认值{
道具：{
组：数组
},
数据（）{
返回{
groupId:groupId++
}
}
}

谢谢@tony19。这是我能得到的最好的答案。使我更清楚地了解了
标签
和
输入
之间的联系，并且效果非常好。