こんにちはー！
せっかくリニューアルしたので、記事でも書いてみようかと新鮮な気分で挑んでおります！
今回はVueで悩んだポイント第一弾！！

全然関係ないけど、WordPress5〜で登場したGutenbergですが、デフォルトでマークダウン形式に対応してるんですね。。。
クラシックモードに変更してマークダウン用のプラグイン入れてたけど、速攻で元に戻しました。マークダウン最高やで！！

本題いきましょう。

dataからdataを生成？？

言ってる意味が分からないかと思うのですが、簡単に言うと以下のようにaというdataを何かしら加工してbに入れたい場合はどうするの？ってことです。

data: function(){
  return {
    a: 1,
    b: // ここにaから1足した数字を入れたい
  }
},

これをやりたい場合、1を足すmethodsかfilterを作って、テンプレートに書けば動くんですが、テンプレートを使わずに、data内だけで完結したい場合はどうしたらいーんだろうとなりました。。。

試してみたこと

色々試してみた感じの結果が以下になります。

data: function(){
  return {
    a: 1,
    b: null, // nullのまま
    b: test, // エラーで動かず(test is not defined)
    b: test(), // エラーで動かず(test is not defined)
    b: { // オブジェクトにtest()が入るだけで2にはならず
      function test(){
        return this.a + 1;
      }
    }
  }
},
methods: {
  test: function(){
    return this.b = this.a + 1;
  },
},

これで学んだのはdata内でmethodsに書いた関数は呼べないということですね。

じゃあどうすればいいの？

結果を言うとライフサイクルを利用して関数を呼べば大丈夫でした。(これが正しいやり方なのかは知らない)
Vueにはライフサイクルというややこしーーーい考え方があり、非常に重要になってきます。
簡単に言うとインスタンスが作られるまでの製造過程を可視化したもの。みたいな感じでしょうか。
そして、各ライフサイクルにフックして何かしら処理したり出来ます。
詳しくはこちらの公式でどうぞ。ちなみにVueとNuxtのライフサイクルは微妙に違うようです。

そのライフサイクルを利用したらこんな感じに。

data: function(){
  return {
    a: 1,
    b: null, // test実行後に2が代入される
  }
},
methods: {
  test: function(){
    return this.b = this.a + 1;
  },
},
created() {
  test()
},

これで動きました。(もう一度言うがこれが正しいのかどうかは分からない)
あんまりこんなのやる事は無いと思いますが、何かあった時のためにメモしとこうと思います！！

ではまた！ありがとうございましたっ！！