小编Bis*_*was的帖子

我是 Vue 的初学者，并通过实践来学习。我能够使复选框可重复使用，但对单选按钮产生了一些奇怪的结果。我有数组格式的数据ProgramDesign.vue：

data() {
  return {
    strategies: [
      "Not Important",
      "Slightly Important",
      "Moderately Important",
      "Very Important",
      "Extremely Important",
    ],
  };
},

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

<template>
  <div>
    <span v-for="strategy in groups" :key="strategy">
      <input :id="strategy" class="radio-style" name="strategy" type="radio" />
      <label :for="strategy" class="radio-style-3-label">{{strategy}}</label>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    groups: Array,
  },
};
</script>

这是它的使用方式ProgramDesign.vue：

<p>first question goes here ?</p>
<RadioButton :groups="strategies" />
<div class="line"></div>
<p>second question goes here ?</p>
<RadioButton :groups="strategies" />

我能够获得可重用的输出，但是当我单击第二个问题的单选按钮时，第一个问题的按钮被选中。我怎样才能解决这个问题？