there is some questions getting from the database, It has options also. Then rendering those on the webpage.

like This

<div v-for=”(question,index) in questions”>
<div class=”interview__item-text interview__text-main m-b-20”>
{ index+1 }. { question.question }
</div>

<div v-for=”(option,index) in question.options”
class=”reg__form-radioitem” :key=”index”>
<div>

<input class=”checkbox countable__input”
v-model=”question.answer”
:value=”option.option”
type=”checkbox”
:id=”question.id+option.id”>
<label :for=”question.id+option.id”>
{ option.option }
</label>
</div>
</div>
</div

This is working fine for input type text and radio but for checkbox it does not work. It checks all the checkboxes in that loop.

question.answer does not exist on the data.when trying to add new property answer using v-model
Thanks.

Solution :

Maybe you can try to predefine the question.answer, should exist after this:

data: {
question: {
answer: null
}
}

Solution 2:

Try this.

<input class=”checkbox countable__input”
v-model=”question[answer]“
:value=”option.option”
type=”checkbox”
:id=”question.id+option.id”>
<label :for=”question.id+option.id”>
{ option.option }
</label>