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来获取问题元素，但它给我一个错误，认为它与{{1}我想抓住的价值（问题）。当然，我不能在标题上使用v-bind，因为Vue仅允许在输入中使用它。

我尝试将v-model更改为v-model，但是后来我不知道如何在脚本中获取它，并且说，用相应的答案将其记录到控制台。

Answer 1

一种解决方法是在Save按钮的click处理程序中同时提交问题和答案。也就是说，将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

VueJS-for循环中的v模型

1 个答案: