VueJS - for 循环中的 v-model

Question

我正在尝试构建类似于 OkayCupid 中的问题的内容，但所有问题（形式不同）都位于同一个组件上。 我为每个问题使用了一个问题对象和 3 个可能的答案，我使用 v-for 循环访问该对象并创建带有问题的卡片、带有收音机的 3 个答案和一个提交按钮。

问题是我不仅想得到用户选择的答案，还想得到它所属的问题。

这是我在模板中的表格：

<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>

还有脚本：

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

如您所见，在表格的开头，我尝试在“假”输入中使用v-model 获取问题元素，但它给我一个错误，它与值的v-bind 冲突（问题）我想抢。当然，我不能在标题本身上使用v-model，因为 Vue 只允许在输入上使用它。

我尝试将v-model 更改为v-model="questionCollection[index].question，但我不知道如何在脚本中获取它，比如说，将其记录到控制台并给出相应的答案。

Answer 1

处理此问题的一种方法是在Save 按钮的click-handler 中一起提交问题和答案。也就是说，将answerQuestion() 更改为接收question（v-for 中的迭代器变量）和answer，并更新模板中Save 按钮的点击处理程序以传递这两个变量：

// 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