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');
  }
}

SNSでシェアする:

大場 正樹 (Masaki Oba)

Web制作会社に3年ほど勤務し、2014年1月にフリーランスとして「Cleysense」を立ち上げ、Webデザイン・DTPデザイン・フロントエンド・バックエンド・ディレクション・コンサルティングなど、幅広く活動中。