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

Question

我是 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" />

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

Answer 1

问题在于 input 的 ID 和名称在组件实例之间不是唯一的，这可以在您的两个 RadioButton 组件的渲染中看到（为简洁起见）：

<!-- RadioButton 1 -->
<div>
  <span>
    <input id="Not Important" name="strategy" type="radio">
    <label for="Not Important">Not Important</label>
  </span>
</div>

<!-- RadioButton 2 -->
<div>
  <span>
    <input id="Not Important"❌ name="strategy"❌ type="radio">
    <label for="Not Important">Not Important</label>
  </span>
</div>

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

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

解决方案

或者，label 和 input 可以通过将 input 放在 label 中来链接，解决 id/for 重复（并提高可读性）：

<label>
  <input name="strategy" type="radio">
  Not Important
</label>

解决重复的names 的一种方法是将名称基于每个实例递增的计数器：

<template>
  <div>
    <label v-for="strategy in groups" :key="strategy">
      <input :name="'strategy' + groupId" type="radio">
      {{strategy}}
    </label>
  </div>
</template>

<script>
let groupId = 0

export default {
  props: {
    groups: Array
  },
  data() {
    return {
      groupId: groupId++
    }
  }
}
</script>