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年勤務した後にフリーランスとして5年半ほどWeb制作やWebマーケティングなどの事業で活動し、2019年7月にクライアントのビジネスをサポートするWeb制作会社としてCleysense株式会社を設立。