Javascript 标签和单选按钮的Vue js表单绑定

我试图生成一个表单列表，这些表单是根据数据动态轮询的。但是，使用：for或v-bind:for不会在浏览器中生成任何html标记，因此单击时标签不会选择相对输入。我已经创建了一个JSFIDLE（由于某些原因，SCS不能在JSFIDLE中工作）。此外，该项目是一个Nuxt构建

代码：

标记：

<div class="option" v-for="answer in poll.answers" :key="answer.answer.id">
  <input type="radio" :id="answer.id" :value="answer.answer">
  <label class="option" :for="answer.id">
     <div class="indicator"></div>
     <div class="label">{{ answer.answer }}</div>
   </label>
</div>

---

提前感谢：）

您的输入id是重复的，因为它仅基于答案的id。您可以通过组合

poll.id+'-'+answer.id

    <div class="option" v-for="answer in poll.answers" :key="answer.answer.id">
      <input type="radio" :id="poll.id + '-' + answer.id" :value="answer.answer" :name="poll.id">
      <label class="option" :for="poll.id + '-' + answer.id">
        <div class="indicator"></div>
        <div class="label">{{ answer.answer }}</div>
      </label>
    </div>

{{answer.answer}

演示

    <div class="option" v-for="answer in poll.answers" :key="answer.answer.id">
      <input type="radio" :id="poll.id + '-' + answer.id" :value="answer.answer" :name="poll.id">
      <label class="option" :for="poll.id + '-' + answer.id">
        <div class="indicator"></div>
        <div class="label">{{ answer.answer }}</div>
      </label>
    </div>