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

Question

我是 Vue 的初学者，正在边做边学。我能够使复选框可重复使用，但单选按钮的结果有些奇怪。 我在 ProgramDesign.vue 中有数组格式的数据:

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

这些是每个问题都会重复的选项。 我像这样为 radio 制作了一个单独的组件:

<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 导致链接的 radio input 更改值。当有多个具有相同标识符的input时，浏览器将label链接到第一个匹配的input，导致您观察到的行为。

name 在组(RadioButton 实例)之间也必须是唯一的，因为浏览器创建具有匹配名称的 input 单选组.

解决方案

或者，label 和 input 可以通过将 input 放在 label 中来链接，解析id/for 复制(并提高可读性):

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

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

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