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

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

您的 sn-p 有效。

仔细检查元素的 id，你可能有重复的 id，导致 labels 出现故障。

查看下面的演示。有两个收音机可以工作（所以你知道你的 sn-p 工作）和一个不工作（因为有一个重复：<div> 与收音机的 id 相同）。

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>