개체 키 및 중첩된 어레이의 Vue.js v-for 루프

개체 키 및 중첩된 어레이의 Vue.js v-for 루프

다른 v-for 내부에 복잡한 v-for 루프가 있습니다.기본적으로 질문 목록과 해당 질문에 대한 답변 목록이 표시됩니다.질문의 키를 입수하여 grouped_answers의 키로 사용할 예정입니다.

v-for 루프는 다음과 같습니다.

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

현재 다음 오류를 반환하고 있습니다.

정의되지 않은 속성 'answers'를 읽을 수 없습니다.

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://vuejs.org/v2/guide/list.html#v-for-with-v-if

언급URL : https://stackoverflow.com/questions/41837277/vue-js-v-for-loop-from-an-object-key-and-nested-array