For循环 - 将动态键绑定到#id

Question

我有一个 for 循环，可以将数据显示到多个单选按钮（引导程序）中：

<div class="radio" >
  <label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
      <input type="radio" name="optradio" id="choice.id"> [[choice.content]]
  </label>
</div>

如您所见，我想在每个按钮中使用choice.id 代替id="..."，从技术上讲，它应该看起来像这样：

<input type="radio" name="optradio" id="1"> Choice1
<input type="radio" name="optradio" id="2"> Choice2
<input type="radio" name="optradio" id="3"> Choice3

但它使用实际字符串 choice.id 呈现它：

<input type="radio" name="optradio" id="choice.id"> Choice1
<input type="radio" name="optradio" id="choice.id"> Choice2
<input type="radio" name="optradio" id="choice.id"> Choice3

原谅我的幼稚。有什么帮助/建议吗？非常感谢！

Answer 1

它使用choice-id 字符串呈现，因为您添加纯字符串作为 id 值，而不是变量值

您可以使用v-bind directive 或v-bind 的简写 -> :id

<div class="radio" >
  <label v-for="(choice, index) in choices" v-if="choice.question_id == question.id" :key="choice.id">
      <input type="radio" name="optradio" v-bind:id="choice.id"> [[choice.content]]
  </label>
</div>

使用简写<input type="radio" name="optradio" :id="choice.id">

在 cmets 中回答您的问题。

您可以通过使用名称属性将它们添加到“组”中来“分离”无线电。具有相同名称属性的收音机属于一组。更改它们的值不会影响其他组中的其他无线电（具有不同的名称属性）。请参见下面的示例。

或者你可以使用vue v-model来分隔并获取选中的选项。

new Vue({
  el: "#radio-app",
  data: {
    question1: '',
    question2: ''
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://github.com/vuejs/vue-devtools"></script>
Question1:
<input type="radio" name="question1" id="q1choice1" value="choice1"/>
<input type="radio" name="question1" id="q1choice2" value="choice2"/>
Question2:
<input type="radio" name="question2" id="q2choice1" value="choice1"/>
<input type="radio" name="question2" id="q2choice2" value="choice2"/>
<hr />
<h2> Or with VUE v-model </h2>
<div id="radio-app">
Question1:
  <input type="radio" id="q1choice1vue" value="choice1" v-model="question1">
  <input type="radio" id="q1choice2vue" value="choice2" v-model="question1">
Question2:
  <input type="radio" id="q2choice1vue" value="choice1" v-model="question2">
    <input type="radio" id="q2choice2vue" value="choice2" v-model="question2">
  <div>Question 1 selected answer: {{ question1 }}</div>
  <div>Question 2  selected answer: {{ question2 }}</div>
</div>

在这里查看更多

• VUE template syntax
• v-bind directive

Answer 2

使用：v-bind:id="choice.id" 或短版:id="choice.id"