Help us understand the problem. What is going on with this article?

【Vue】v-onで複数の関数を呼び出す方法

More than 1 year has passed since last update.

イベントハンドラ

  • メソッドイベントハンドラ

その名の通り v-on は呼び出したいメソッドの名前を指定する

<div @click="method"></div>
  • インラインメソッドハンドラ

メソッド名を直接指定する代わりに、インライン JavaScript 式でメソッドを指定する

<div @click="method('Hello')"></div>
var vm = new Vue({
  // ・・・
  methods: {
    method: function (message) {
      alert(message)
    }
  }
})

単一のv-onイベントで複数の関数を呼び出す方法

単一の関数を分割して呼び出し

<div @click="firstMethod(); secondMethod()"></div>
var vm = new Vue({
  // ・・・
  methods: {
    firstMethod: function () {
      // ・・・
    }
    secondMethod: function () {
      // ・・・
    }
  }
})

複数の関数を実行するラッパー関数を実行

<div @click="multipleHandler()"></div>
var vm = new Vue({
  // ・・・
  methods: {
    multipleHandler: function () {
      this.firstMethod()
      this.secondMethod()
    }
    firstMethod: function () {
      // ・・・
    }
    secondMethod: function () {
      // ・・・
    }
  }
})

まとめ

多くのイベントハンドラのロジックはより複雑になっていくので、v-on 属性の値に JavaScript 式を記述し続けるのは現実的ではありません。

ドキュメントにあるように、複数の処理を行う必要がある場合は、
両方を含むラッパー(複合関数)を実行する方が良いかもしれません😷

メソッドイベントハンドラのロジックとして単一の関数呼び出しのみを行う方が、Vue的にはベストプラクティスなのでしょうか?😪

参考

https://stackoverflow.com/questions/38744932/how-to-call-multiple-function-with-v-onclick

_Keitaro_
2015.12からWEB制作会社で、主にWEBシステム開発の仕事をしています。
karabiner
主にシステム開発・アプリ開発・ Webサイト制作を行う会社です
http://www.karabiner.tech/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした