Vue.jsのメソッド内で別のメソッドを呼び出す

最終更新日: 2019/01/17(木)

Vue.jsで、メソッド内で別のメソッドを呼び出すようなメソッドの使い回しをしたいことがあります。
ネイティブのJavaScriptの場合、

function hoge() {
  hogehoge(); // Hello
}

function hogehoge() {
  console.log('Hello');
}

のような形で、関数内で別の関数を呼び出せますが、Vue.jsではどういう実装の仕方になるでしょうか。

参考URL: https://stackoverflow.com/questions/40707738/vuejs-accessing-a-method-from-another-method

ネイティブのJavaScriptの場合

ネイティブのJavaScriptと全く同じように書く場合はこうなりますが、これではnot definedエラーが出てしまいます。

methods: {
  hoge: function() {
    hogehoge(); // not defined
  },
  hogehoge: function () {
    console.log('Hello');
  }
}

解決方法はとても単純です。
Vue.jsの場合は、宣言したメソッドがVueインスタンス上にあるため、thisを使って他のメソッドを呼び出します。

methods: {
  hoge: function() {
    this.hogehoge(); // Hello
  },
  hogehoge: function () {
    console.log('Hello');
  }
}

Web制作会社に3年勤務した後にフリーランスとしてWeb制作やWebマーケティングなどの事業で6年活動し、事業拡大に伴い2019年7月にCleysense株式会社を設立。