javascript - 来自对象键和嵌套数组的 Vue.js v-for 循环

标签 javascript loops vue.js vuejs2 v-for

我在另一个 v-for 中安静了一个复杂的 v-for 循环。基本上显示问题列表和该问题的答案列表。我计划获取问题的 key 并将其用于 grouped_answers 的 key 。

v-for循环如下:

        <div v-for="question in questions.questions">
          {{question.question}}
          <div v-for="a in grouped_answers[0].answers">
            {{a.answer}}
          </div>
        </div>

当前返回错误:

Cannot read property 'answers' of undefined.

grouped_answers 对象示例在这里:

[
  {
    "question_id": 1,
    "answers": [
      {
        "id": 1,
        "answer": "Cat"
      },
      {
        "id": 2,
        "answer": "Dog"
      }
    ]
  },
  {
    "question_id": 2,
    "answers": [
      {
        "id": 3,
        "answer": "Fish"
      },
      {
        "id": 4,
        "answer": "Ant"
      }
    ]
  }
]

对于完整的模板,我附上了下面的代码:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
              <div v-for="app in appliances">
                <input type="radio" id="one" v-model="appliance"  v-bind:value="app.id" v-on:change="getQuestions">
                <label for="one">{{app.appliance}}</label>
              </div>
              <br>
              <span>Picked: {{appliance}}</span>
              </br>
              </br>
                <div v-for="co in brands">
                  <input type="radio" id="two" v-model="brand"  v-bind:value="co.id">
                  <label for="one">{{co.brand}}</label>
                </div>
              <span>Picked: {{ brand }}</span>
              </br>
              </br>
                <input type="radio" id="one" value=1 v-model="age">
                <label for="one">1 Year</label>
                <br>
                <input type="radio" id="two" value=2 v-model="age">
                <label for="two">2 Years</label>
                <br>
                <input type="radio" id="two" value=3 v-model="age">
                <label for="two">3 Years</label>
                <br>
                <input type="radio" id="two" value=4 v-model="age">
                <label for="two">4 Years</label>
                <br>
                <input type="radio" id="two" value=5 v-model="age">
                <label for="two">5 Years</label>
                <br>
                <input type="radio" id="two" value=6 v-model="age">
                <label for="two">6 Years</label>
                <br>
                <input type="radio" id="two" value=7+ v-model="age">
                <label for="two">7+ Years</label>
                <br>
              <span>Picked: {{ age }}</span>
              <br>
              <br>
                <div v-for="question in questions.questions">
                  {{question.question}}
                  <div v-for="a in grouped_answers[0].answers">
                    {{answers.answer}}
                  </div>
                </div>
              <br>
              <br>
              {{grouped_answers[0]}}
              <br>
              <br>
                <input v-model="first_name" placeholder="First Name">
                <p>First Name is: {{ first_name }}</p>
                <input v-model="last_name" placeholder="Last Name">
                <p>Last Name is: {{ last_name }}</p>
                <input v-model="phone_number" placeholder="Phone Number">
                <p>Phone Number is: {{ phone_number }}</p>
                <input v-model="email" placeholder="Email">
                <p>Email is: {{ email }}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
      mounted() {
          console.log('Component ready.');

          console.log(JSON.parse(this.a));
          console.log(JSON.parse(this.b));

          this.appliances = JSON.parse(this.a);
          this.brands = JSON.parse(this.b);

      },

      props: ['a','b'],

        data: function() {
          return {
              appliances: '',
              appliance: '',
              brands: '',
              brand: '',
              age: '',
              first_name: '',
              last_name: '',
              phone_number: '',
              email: '',
              questions: '',
              answers: '',
              result: '',
              grouped_answers:'',
            }
        },
        methods: {
         getQuestions: function (){
           console.log(this.appliance);
           var self = this;
           axios.get('/get_questions/' + this.appliance, {

            })
            .then(function(response) {
                console.log(response.data);
                self.questions = response.data;
                self.getAnswers();
            })
            .catch(function(error) {
                console.log(error);
            });
         },
         getAnswers: function (){
           console.log(this.appliance);
           var self = this;
           axios.get('/get_answers/' + this.appliance, {

              })
              .then(function(response) {
                  console.log(response.data);
                  self.answers = response.data;
                  self.putAnswers();
              })
              .catch(function(error) {
                  console.log(error);
              });
         },
         putAnswers: function (){
           var result = {};

           for (var i = 0; i < this.answers.answers.length; i++) {
             var question_id = this.answers.answers[i].question_id;
             console.log(question_id);
             if(!result[question_id]) {
                result[question_id] = {question_id: question_id, answers: []};
              }
              result[question_id].answers.push({
                id: this.answers.answers[i].id,
                answer: this.answers.answers[i].answer})
           }
           result = Object.keys(result).map(function (key) { return result[key]; });
           console.log(result);

           this.grouped_answers = result;

           console.log(this.grouped_answers[0].answers);

         },
       },
    }
</script>

推荐后更新

        <div v-for="question in questions.questions">
          {{question.question}}
          <div v-for="a in grouped_answers[0].answers" v-if="grouped_answers">
            {{a.answer}}
          </div>
        </div>

最佳答案

v-for 优先于 v-if 所以它试图在有任何数据之前运行循环。为了防止这种情况,添加一个周围的 div 或 span 并将 v-if 附加到它上面。像这样的东西:

    <div v-for="question in questions.questions">
      {{question.question}}
      <div v-if="grouped_answers">
        <div v-for="a in grouped_answers[0].answers">
          {{a.answer}}
        </div>
      </div>
    </div>

这是他们提到优先级的文档:

https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if

关于javascript - 来自对象键和嵌套数组的 Vue.js v-for 循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41837277/

相关文章:

javascript - Mutation 不会更新 VUEX 中的 store

javascript - Vue.js 全局事件总线

javascript - 控制台日志返回null

javascript swapNode 在 Firefox 和 Chrome 中不起作用

Java - 循环和特定字符

loops - 为什么 Clojure 的范围只迭代 32 次?

vue.js - 在自定义指令中模拟 v-if 指令

javascript - 如何更改 angularJS+Bootstrap 中的行?

javascript - 如何在 Javascript 中的粘贴事件后发出警报?

java - 我如何检查Java中一个句子中有多少个辅音和元音?