VueJS：使用vuejs将数据传递给方法

问题描述

这是我在App.vue文件中的HTML代码。

<b-form @submit="onSubmit">
  <b-form-group>
    **nested v-model binding**
    <div v-for="(question,index) in questionsList" :key="question.question">
      <h4>{{question.question}}</h4>
      <div v-for="options in question.responses" :key="options.options">
        <input
          type="radio"
          :name="'question'+index"
          :value="options.options"
          v-model="responses['question'+index]"
          />
        {{options.options}}
        <br />
      </div>
    </div>
    <b-button variant="outline-primary" type="submit">Submit</b-button>
  </b-form-group>
</b-form>  

***脚本***

export default {
  data() {
    return {
      responses: {},questionsList: [
        {
          id: "1",question: "What is the full form of HTTP?",responses: [
            { options: "Hyper text transfer package" },{ options: "Hyper text transfer protocol" }            
          ],},{
          id: "2",question: "HTML document start and end with which tag pairs?",responses: [
            { options: "HTML" },{ options: "WEB" }            
          ],answersheet: {
        q1: "Hyper text transfer protocol",q2: "HTML"        
},methods: {
    onSubmit(event) {
      event.preventDefault();

      var score = 0;
      for (var key of Object.keys(this.responses)) {
        console.log(key + " -> " + this.responses[key]);
        //displays the answers of the users 

       **trying to compare the answers from my answersheet but keeps saying undefined**
        if (this.responses[key] == this.answersheet[key]) {
          score = score + 1;
        }
      }
     
      displays score to console
      console.log(score);
    }
  }

我在这里想要做的是计算正确答案的数量，然后将结果发送到api，但是我的代码无法正常工作。 我还是vuejs的新手，这是我上课的第一个项目。

解决方法

我已经提出了一些观点，并对您的代码进行了一些更改

1. 您需要确保已写上开合括号
2. 检查索引并确保您正在比较正确的值
3. 仔细阅读文档，并尝试按照入门说明进行操作。它为您提供了很好的定位。
4. 玩得开心

new Vue({
  el: '#app',data() {
    return {
      isSubmitted: false,score: 0,responses: {},questionsList: [
        {
          id: "1",question: "What is the full form of HTTP?",responses: [
            { options: "Hyper text transfer package" },{ options: "Hyper text transfer protocol" }            
          ],},{
          id: "2",question: "HTML document start and end with which tag pairs?",responses: [
            { options: "HTML" },{ options: "WEB" }            
          ],],answersheet: {
        question0: "Hyper text transfer protocol",question1: "HTML" 
      },};
  },methods: {
    tryAgain() {
      this.responses = {};
      this.score = 0;
      this.isSubmitted = !this.isSubmitted;
    },onSubmit() {
      for (var key of Object.keys(this.responses)) {
        console.log(key + " -> " + this.responses[key]);
        if (this.responses[key] == this.answersheet[key]) {
          this.score++;
        }
      }
      this.isSubmitted = !this.isSubmitted

    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />


<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-form @submit.prevent="onSubmit">
    <b-form-group v-if="!isSubmitted">
      <!-- nested v-model binding** -->
      <div v-for="(question,index) in questionsList" :key="question.question">
        <h4>{{question.question}}</h4>
        <div v-for="options in question.responses" :key="options.options">
          <input
            type="radio"
            :name="'question'+index"
            :value="options.options"
            v-model="responses['question'+index]"
           />
          {{options.options}}
          <br />
        </div>
      </div>
      <b-button variant="outline-primary" type="submit">Submit</b-button>
    </b-form-group>
    <div v-else>
      Your score: {{ score}}
      <br>
      <b-button variant="outline-primary" @click="tryAgain">Try Again</b-button>
    </div>
  </b-form>
</div>