My goal is to generate a dynamic list of form polls based on the data. However, using :for or v-bind:for does not result in any HTML markup appearing in the browser, causing the labels to not select the corresponding input when clicked. I have prepared a JSFiddle for reference (Note: SCSS may not work in JS Fiddle). This project is built with Nuxt.
Here is the code snippet: https://jsfiddle.net/mc4rdle/o19bgjpe/2/
Markup:
<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>
Data: polls: [
{
id: 1,
question: 'How do you feel about your current salary?',
answers: [
{
id: 1,
answer: 'Satisfied'
},
{
id: 2,
answer: 'Content'
},
{
id: 3,
answer: 'Unhappy'
}
]
},
{
id: 2,
question: 'What group activity should we do??',
answers: [
{
id: 1,
answer: 'Yoga'
},
{
id: 2,
answer: 'Table Tennis'
},
{
id: 3,
answer: 'Pints'
}
]
}
]
Thank you in advance :)