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

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

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

标签： htmlvue.jsvuejs2

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链接到一个，这样单击会导致链接的单选更改值。当存在多个具有相同标识符的 s 时，浏览器会将 s 链接到第一个匹配的 s ，从而导致您观察到的行为。inputforidlabelinputinputlabelinput

组（实例）之间的name也必须是唯一的，因为浏览器会创建具有匹配名称RadioButton的 s 单选组。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>