vue.js　配列　エラー解決できない

jsonから取得したデータを表示したく以下のように書きました。
console.log(question.groups[0].statuses.selections[0].name )で見てみるとjsonのnameが取れてきているのですが
なぜかエラーになってjsonのデータが表示されません。以下がエラー内容です。
わかる人がいましたらご教授お願いしたいです

// エラー内容
bugsnag-vue.js?3181:30 TypeError: Cannot read property '0' of undefined
    at Proxy.render (index.vue?892f:24)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4049)
    at Watcher.get (vue.runtime.esm.js?2b0e:4473)
    at new Watcher (vue.runtime.esm.js?2b0e:4462)
    at mountComponent (vue.runtime.esm.js?2b0e:4067)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
    at init (vue.runtime.esm.js?2b0e:3118)
    at merged (vue.runtime.esm.js?2b0e:3301)
    at hydrate (vue.runtime.esm.js?2b0e:6372)

      <div class="answer">
        <p class="answer_select">
          {{ question.groups[0].statuses.selections[0].name }}
        </p>
      </div>
      <div class="answer">
        <p class="answer_select">
          {{ question.groups[0].statuses.selections[0].name }}
        </p>
      </div>
      <div class="answer">
        <p class="answer_select">
          {{ question.groups[0].statuses.selections[0].name }}
        </p>
      </div>

    <script lang="ts">
     import { Component, Vue } from 'vue-property-decorator'
     import test from '@/assets/test.json'
    export default class QuestionyPage extends Vue {
    question: any = []

    mounted() {
      this.setTest()
     }

    setTest() {
    this.question = test
   </script>
  }

// test.json
//test.json
{
  "total_count": 3,
  "groups": [
    {
      "type": "bbb",
      "statuses": {
        "selections": [
            {
                "id": 0,
                "name": "山田",
                "selected": false
            }, {
                "id": 1,
                "name": "前田",
                "selected": false
            }, {
                "id": 2,
                "name": "佐藤",
                "selected": false
            }
        ]
      }
    }
  ]
}

Lhankor_Mhy

2020/06/09 05:04

surveys というのはなんですか？

whiwhdiw

2020/06/09 05:49

間違えていました。修正しました

行動規範の内容に同意します

回答1件

ベストアンサー

Vueのtsでの書き方って結構違うんですね…っていうのはさておき、
記載されているソースでは文法エラーになりそうな気がするけど

vue
1<template>
2  <div id="app">
3      <div class="answer">
4        <p class="answer_select">
5          {{ question.groups[0].statuses.selections[0].name }}
6        </p>
7      </div>
8      <div class="answer">
9        <p class="answer_select">
10          {{ question.groups[0].statuses.selections[0].name }}
11        </p>
12      </div>
13      <div class="answer">
14        <p class="answer_select">
15          {{ question.groups[0].statuses.selections[0].name }}
16        </p>
17      </div>
18  </div>
19</template>
20
21<script lang="ts">
22  import { Component, Vue } from 'vue-property-decorator';
23  import test from './test.json';
24  @Component
25  export default class QuestionnaryPage extends Vue {
26    question: any = [];
27    created() {
28      this.setTest();
29    }
30    setTest() {
31      console.log(test);
32      this.question = test
33    }
34  }
35</script>
36
37<style>
38</style>