Vue.jsのライフサイクル関数 created: 内ではthis.関数名()にしないと関数呼ばれないから気をつけてね！

要旨

Vue.jsにはDOMのライフサイクルごとに行いたい処理を定義しておくことが出来ます。なお、ライフサイクル関数は、Railsで言う before_action などのコールバックメソッドみたいなものです。

想定ケース

1. 画面を描画した時点でRailsのAPIを叩く
2. 取得した情報をデフォルトで画面の表示情報としてVue.jsのプロパティにセットしたい

以前、実際にした実装で 画面の描画時点でフォームに別の画面ですでに設定済みのユーザー情報をサーバー側から取得して埋めておきたい ケースがありました。今回はそんな場合に created のライフサイクル関数内でRailsのAPIを叩く別の関数を呼ぶ場合の注意点です。

実装例

Register.vue

created: function() {
  this.userInfo ();
},
<中略>
methods: {
  <中略>
  userInfo () {
    userInfoApi.info ()
    .then((res) => {
      this.userInfo = res;
    });
  }
}

this.をつけない場合

DOMを読み込んだ時点で userInfo なんて関数ねえよ！ってエラーになります。
なお、今回は created を例にしましたが、 mounted でも同じことが起こるので、 this.関数名 で呼び出すことを忘れずに！