2021/07/19

axiosによるvueの更新(再描画)

vueによる再描画ですが、前提条件としてdataの中に入っている値は値が変化されると再描画されます。めちゃめちゃ便利！
ですがdataの中が配列だったりすると、配列の中身が更新された通知を送る事が必要です。

また、axiosで通信を行った成功結果をdataにそのまま入れたい所ですが、非同期通信なのでthisをそのまま持っていくことができません。
下記のように.bind(this)をしてあげればOKです。

      axios
        .post(route("hoge.store", { hoge_id: this.hoge.id }))
        .then(
          function (res) {
            this.cbKansuu(); //コールバック関数等を置く
          }.bind(this) //ここにbind(this)を入れる事でvueのthisが使える
        )
        .catch(
          function (err) {
            console.log(err);
          }.bind(this)
        );

余談になってしまうのですが、propsのプロパティはvue内で変更はせず、変更する場合はdataに代入して、data内で変更するのが推奨されている様子です。