如何为一组动态创建的单选按钮使用标签

Question

我在 Vuejs 2 中有一个动态创建的单选按钮列表：

<div class="form-check" v-for="design in designs" :key="design.id">
                    <input class="form-check-input" type="radio" :value="design" v-model="selectedDesign" :id="design.id" :name="design.id">
                    <label class="form-check-label" v-bind:for="design.id">{{design.name}}</label>
                  </div>

但是，"V-bind：for"不起作用 - 硬编码"for"不会让我链接到动态创建的单选按钮。有谁知道如何在动态创建的标签中使用"for"？

Answer 1

您的代码段有效。

仔细检查元素的 ID，您可能有重复的 ID，导致label出现故障。

查看下面的演示。有两个无线电可以工作(所以你知道你的片段有效(，还有一个不能(因为存在重复：具有相同收音机id的<div>(。

new Vue({
  el: '#app',
  data: {
    designs: [
      {id: 1, name: "I'm the label for the radio with id=1 (will work)"},
      {id: 2, name: "I'm the label for the radio with id=2 (won't work because another element with id=2 exists)"},
      {id: 3, name: "I'm the label for the radio with id=3 (will work)"}
    ],
    selectedDesign: null
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.min.js"></script>
<div id="app">
  <div id="2">I am a div with id=2.</div>
  <br><br>
  <div class="form-check" v-for="design in designs" :key="design.id">
    <input class="form-check-input" type="radio" :value="design" v-model="selectedDesign" :id="design.id" :name="design.id">
    <label class="form-check-label" v-bind:for="design.id">{{design.name}}</label>
  </div>
  
</div>