それでも気分は高専生

元高専生が自分のやってきたことを記事として残すためのてきとーなブログ

VueJSのmethods定義で,アロー関数を使うとComponent側が更新反映をしない件

TL;DR

  • アロー関数を使うと,thisの扱いは呼び出すコンテクストではなく宣言するコンテクストで決定
  • methodsで定義したメソッドはVueComponentから呼び出される
  • VueJSのコンポーネント定義時にアロー関数で束縛してはダメという話

課題

  • methodsで定義した関数を使ってdataの内容を変更
  • template内でバインドしたのに反映されず死亡
  • methodsで定義した関数内でconsole.log(this.value)を呼び出しても値はちゃんと反映されている
  • 他のコンポーネントでバインドした箇所に関してはきっちり反映されている

解決のきっかけ

methods内で何故かアロー関数を使用しているのに気づいた.
(VueJS初めて + 急ごしらえでコピペを乱用していたので,それが原因で混じったのかな?)
試しにアロー関数でggってみるとこんな記事が...

qiita.com

実験

<script>
export default {
  name: 'Board',
  methods: {
    sample () {
      console.log(this)
    },
    sampleArrow: () => {
      console.log(this)
    }
  }
}
</script>

実験結果

f:id:takahiro0914:20181007153958p:plain

結論

プロパティの書き換えには成功していた.
しかし,アロー関数と通常関数におけるthisの違いのせいで,書き換えるプロパティが属するインスタンスが異なっていた.

感想

JSの使用を把握していなくてゴメンナサイ...