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

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

该name还必须是群体（间独特的RadioButton情况下），因为浏览器创建的单选按钮组input具有匹配名称秒。

解决方案

或者， a labelandinput可以通过将 放在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>