【Vue×Rails】data()内にAとBの2つの変数がある時、BからAを参照できるようにしたい

Question

前提・実現したいこと

（B）answersの配列の中で、（A）questionnaireに格納された値を参照したいです。

questionnaire格納されている値は下記の画像の通りで、answersにはquestionnaire_choicesを入れたいです。

なにかご存知の方がいらっしゃいましたら、アドバイスを頂けますと幸いです。
宜しくお願いいたします。

data() {
  return {
    questionnaire: "",
    answers: [
      {},
      {},
      {}
    ]
  }
}

発生している問題・エラーメッセージ

questionnaire_choicesが定義されていない

Error in data(): "TypeError: Cannot read property 'questionnaire_choices' of undefined"

該当のソースコード

  data() {
    return {
      questionnaire: "",
      options: {
        answers: [
          {
            value: this.questionnaire.questionnaire_choices[0].id,
            text: this.questionnaire.questionnaire_choices[0].choice,
            votes: this.questionnaire.questionnaire_choices[0].answers_count,
          },
          {
            value: this.questionnaire.questionnaire_choices[1].id,
            text: this.questionnaire.questionnaire_choices[1].choice,
            votes: this.questionnaire.questionnaire_choices[1].answers_count,
          },
          {
            value: this.questionnaire.questionnaire_choices[2].id,
            text: this.questionnaire.questionnaire_choices[2].choice,
            votes: this.questionnaire.questionnaire_choices[2].answers_count,
          },
        ]
      }
    };
  },

試したこと

同じdata内だとthisで取ってこようとするのがいけないのか？と思い、thisを抜いてみましたが、参照できませんでした。

また、template内では、下記のようにすることで正しくquestionnaire内の値を参照できています。

<template>
  性別：{{ questionnaire.gender }}
</template>

補足情報（FW/ツールのバージョンなど）

questionnaireにはaxiosでRailsから取ってきたデータを格納しています。

      this.$axios
        .get(`http://localhost:3000/api/v1/questionnaires/${this.$route.params.id}`)
        .then((res) => {
          this.$data.questionnaire = res.data;
        })

Rails 6.0.3.6
Vue 2.6.12

Answer 1

Vueの記述ルール上、そこは変数定義部分なので、thisは使えません（thisはあくまでdata()で定義した変数を外側に返すためのものです）。

なので、最初に変数に値を突っ込みたい場合はライフサイクルフックで値を代入して準備すればどうでしょうか。

この場合はDOM生成後前で問題ないと思うのでcreatedプロパティが妥当でしょう。

動くかは確かめてません

data(){
    return{
        answers:[
            {value:'',text:'',votes:''}
        ],
        questionnarie: //省略
    }
},
created:function(){
      let answers = this.answers
      let questionnarie = this.questionnarie
      for(let i = 0, i < questionnarie.length; i++){
          answers[i].value = questionnaire.questionnaire_choices[i].id
          answers[i].text = questionnaire.questionnaire_choices[i].choice
          answers[i].votes = questionnaire.questionnaire_choices[i].answers_count,
      }
      this.answers = answers //代入した値を返す
 },

こんな感じで値を準備していきます。

Comments

[nomu_lui]

ご回答いただきありがとうございます！

```
data() {
return {
questionnaire: "",
options: {
question: "",
answers: [
{value:'',text:'',votes:''}
]
}
};
},
created() {
let answers = this.options.answers;
let questionnarie = this.questionnarie;
for(let i = 0; i < 2; i++){
answers[i].value = this.questionnaire.questionnaire_choices[i].id,
answers[i].text = this.questionnaire.questionnaire_choices[i].choice,
answers[i].votes = this.questionnaire.questionnaire_choices[i].answers_count
}
},
```

こうすると、下記のようにquestionnaire_choicesの下の階層を読み込んでくれない（インデックスの指定ができない）のですが、なにかお分かりになりますでしょうか？

`Error in created hook: "TypeError: Cannot read property '0' of undefined"`

[FKM]

一度 letで代入した後thisは不要です。