For loop - bind dynamic key to the #id - html

Question

I have a for loop that displays the data into multiple radio-buttons (bootstrap):
<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>
As you can see, I wanted to use the choice.id for id="..." in each button, technically it should look something like this:
<input type="radio" name="optradio" id="1"> Choice1
<input type="radio" name="optradio" id="2"> Choice2
<input type="radio" name="optradio" id="3"> Choice3
But it renders it with the actual string 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
Forgive my naiveness. Any help/advices? Thanks a lot!

Answer 1

It renders with choice-id string because you add plain string as the id value, not a variable value
You can use v-bind directive or the shorthand for 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>
using shorthand <input type="radio" name="optradio" :id="choice.id">
To answer your questions in the comments.
You can ' separate 'the radios by adding them in a ' group ' using the name attribute. Radios with the same name attribute are in one group. Changing their values won't affect other radios in other groups ( with different name attributes ). See example below.
Or you can use vue v-model to separate and get the selected options.
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>
Check more here
VUE template syntax
v-bind directive

Answer 2

Use: v-bind:id="choice.id" or the short version :id="choice.id"