VueJS - v-model in for-loop

Question

I'm trying to build something like the questions in OkayCupid, but all the questions - which are different forms - are located on the same component. I use an object of questions and 3 possible answers for each question, and I use v-for to loop through the object and create cards with a question, 3 answers with radios, and a submit button.

The problem is that I want to get not only the answer the user chooses, but also the question it belongs to.

Here is my form in the template:

<div class="container">
  <div class="row">
    <div
      class="col-lg-3 col-md-4 col-6"
      v-for="(question,index) in questionCollection"
      :key="index"
    >
      <form class="form">
        <div class="img-fluid img-thumbnail shadow-lg p-3 mb-5 bg-white rounded">
          <!-- <input type="text" :value="question.question" v-model="q" /> -->
          <h3 class="d-block mb-4 h-100" alt data-holder-rendered="true">{{ question.question }}</h3>
          <div class="card-body container">
            <div class="card-text form-check">
              <input
                class="form-check-input"
                type="radio"
                name="gridRadios"
                id="a1"
                :value="question.answer1"
                v-model="answer"
              />
              <h4 class="font-weight-light" for="a1">{{ question.answer1 }}</h4>
            </div>
            <div class="card-text form-check">
              <input
                class="form-check-input"
                type="radio"
                name="gridRadios"
                id="a2"
                :value="question.answer2"
                v-model="answer"
              />
              <h4 class="font-weight-light" for="a2">{{ question.answer2 }}</h4>
            </div>
            <div class="card-text form-check">
              <input
                class="form-check-input"
                type="radio"
                name="gridRadios"
                id="a3"
                :value="question.answer3"
                v-model="answer"
              />
              <h4 class="font-weight-light" for="a3">{{ question.answer3 }}</h4>
            </div>
          </div>
          <div class="card-text container">
            <small class="text-muted">{{ question.user }}</small>
            <button
              href="#"
              class="btn btn-primary my-3 mx-10 btn float-right shadow-sm rounded"
              @click.prevent="answerQuestion"
            >Save</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

And the script:

export default {
  name: "questions",
  data() {
    return {
      q: null,
      answer: null
    };
  },
}

As you can see, at the beginning of the form, I tried to get the question element using v-model in a "fake" input, but it gives me an error that it's conflicted with the v-bind of the value (the question) I want to grab. Of course, I can't use v-model on the headline itself because Vue allows to use it only on inputs.

I've tried to change the v-model into v-model="questionCollection[index].question, but then I have no idea how to get it in the script and, let's say, log it to the console with the corresponding answer.

Answer 1

One way to handle this is to submit the question and answer together in the Save button's click-handler. That is, change answerQuestion() to receive question (the iterator variable in v-for) and answer, and update the Save button's click handler in the template to pass those two variables:

// template
<div v-for="(question, index) in questionCollection">
  ...
  <button @click.prevent="answerQuestion(question, answer)">Save</button>
</div>

// script
answerQuestion(question, answer) {
  console.log({ question, answer })
}

demo