RyoGIFT | Web developer blog

Web開発者のブログです。

Vue.jsでfunctionの省略記法

Vue.jsのガイドでfunctionを使っている部分を見つけたので直感でArrow Functionの記法を使ってみましたが、正常に動きませんでした。

引用元: はじめに — Vue.js

// functionありの記法
const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split("").reverse().join("")
    }
  }
});

Arrow Functionを使うと想定どおりに動かないので注意しましょう。

// Bad
const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage: () => {
      this.message = this.message.split("").reverse().join("")
    }
  }
});

以下のエラーが出力されます。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'split' of undefined"

methodsのAPI説明にしっかりと書かれていますね。

メソッド(例 plus: () => this.a++) を定義するためにアロー関数を使用すべきではないことに注意してください。アロー関数は、this が期待する Vue インスタンスではなく、this.a が undefined になるため、親コンテキストに束縛できないことが理由です。

引用元: API — Vue.js

正しい省略記法の書き方です。

// Good: 省略記法
const app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!"
  },
  methods: {
    reverseMessage () {
      this.message = this.message.split("").reverse().join("")
    }
  }
});