Nuxt.jsで年齢の計算結果を表示できるようにしたい。

Question

前提・実現したいこと

Nuxt.jsとfirebaseを使って道場生の情報として生年月日から年齢を計算するプログラムを作っています。計算まではうまく行きましたが、その計算結果を表示させることがうまくできなくて困っています。

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

Cannot read property 'age' of undefined

該当のソースコード

<template>
略
 <td>{{ this.age }}歳</td>
略
</template>

export default {
  data() {
    return {
      age: '',
  },
  created() {
    this.$store.dispatch('setStudentsRef', db.collection('students'));
    // 年齢を計算 //
    const studentRef = db.collection('students');
    studentRef.get().then(querySnapshot => {
      querySnapshot.forEach(birthDayDocSnapshot => {
        const birthDay = birthDayDocSnapshot.data().pickerDate;
        const today = moment();
        let y = Math.floor(moment.duration(today.diff(birthDay)).as('months') / 12);
        this.age = y;
      });
    });
  },

試したこと

console.log(this.age)とするとちゃんと数字のデータはちゃんと取れています。
コールバック関数の問題でもなさそうですし、どうすればいいのか困っています。

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

ここにより詳細な情報を記載してください。

Answer 1

略 で省略されている部分のコードを見ないと原因を特定することは難しいですが、おそらくv-bindなどでtemplate内で参照する this がVueインスタンスが存在するのと別のコンテキストに置き換わってしまっているものと思われます。

以下のように、thisを使わずにdataを参照するようにしたらいかがでしょうか？

<template>
略
 <td>{{ age }}歳</td>
略
</template>

また問題の切り分け方法に関してですが、次の ようにdata => templateの描画に問題があるのか created のロジック内に問題があるのかを行うことができます。

  data() {
    return {
      // 適当な値を初期値としてセットしてtemplateに描画されるかを確認
      age: 999,
  },

Comments

[wattyo]

回答ありがとうございます。thisを外すことで描画はされましたが、例えば、一人目に登録した道場生の年齢が30歳、二人目に登録した道場生の年齢が１０歳とした場合、なぜか一人目の年齢も10歳になってしまいます。

[wattyo]

とりあえず表示させることができましたが、別の問題が発生したので改めてまた質問を行います。