How to bind dynamic checkbox form to a single Array using VueJS?

Viewed 296

I have a dynamic form made of N questions that i recieve from back-end, that form includes all input types, like text, radio and checkbox, randomly. But the checkbox answers I can't store in the same array that the other answers, because when I check one box, all the other get checked at the same time and i get only true or false on the array position intead of the input value. How can I solve this?

Here is an example of my code.

Works perfectly

<!-- Single answer question -->
<div v-if="question.type === 'multiple' && !question.checkMultiple">
  <div
    v-for="(alternative, indexAlternative) in question.alternatives"
    :key="indexAlternative"
    class="field"
  >
    <b-radio v-model="answers[index]" :native-value="alternative">
      {{ alternative }}
    </b-radio>
  </div>
</div>

Don't work

<!-- Multiple answer question -->
<div v-else>
  <div
    v-for="(alternative, indexAlternative) in question.alternatives"
    :key="indexAlternative"
    class="field"
  >
    <b-checkbox
      v-model="answers[index]"
      :native-value="alternative"
      :name="`question${index}`"
    >
      {{ alternative }}
    </b-checkbox>
  </div>
</div>

What i'm doing wrong?

0 Answers
Related