[Vue]1つのv-onディレクティブに、複数のメソッドを仕込める件

3992 ワード
メソッド ディレクティブ Vue.js Vue.js テキストリンク

はじめに

今回、１つのv-onディレクティブで、2つ以上のメソッド発火をしたいと考え、公式で方法を探したのですが、うまく見つけられなかったので、共有しておきます。

いきなり結論サンプル

See the Pen ディレクティブで複数のメソッドをあてる by riotam (@riotam4) on CodePen.

解説

短いコードなので、全文を転記してます。

HTML側
<div id="app">
  <button @click='onClick1(); onClick2()'>クリックしてね</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
JS側
  new Vue({
    el: "#app",
    methods: {
      onClick1() {
        alert('onClick1 を検知');
      },
      onClick2() {
        alert('onClick2 を検知');
      }
    }
  })

簡単なコードなので、詳細の解説は割愛しますが、ポイントだけ次で共有します。

ポイント

ズバリ、HTML側の2行目にある、@click='onClick1(); onClick2()'です。
v-onディレクティブの後ろの''(または"")の中に、メソッド名を;で区切ると、両方のメソッドを呼び出せます。

ちなみに

;ではなく,でも同じ挙動を得られることがあります。
しかし、コードによっては、なぜかうまく挙動してくれないことがあり、挙動してくれない条件がよくわからないので、使う際は十分にご注意ください。
（というか、;こっちを使っておく方が無難かと思います。）

注意点まとめ

  • 通常v-onでメソッドを指定する場合と違い、()が必要
  • ;ではなく,でも同じ挙動を得られることがあるが、コードによっては、なぜかうまく挙動してくれないことがあった
  • ;ではなくて、(空文字)を入れると、画面の描画自体がされなくなり、エラー等も確認できない状態になる
  • # さいごに 今日は短めですが、この辺で。 最後までありがとうございました。

追記

この記事のコメント欄で、@yd_nikuさんが非常にわかりやすく、完結に解説して下さっています。
ぜひそちらも参考にして頂けると、良いかと思います！
@yd_nikuさんありがとうございます！