v-onディレクティブに複数のイベントを一括指定する [Vue.js]

ここではv-onディレクティブで、複数のイベントをまとめて一括で指定する方法について紹介します。

1 v-onディレクティブ
2 v-onディレクティブのオブジェクト記法
- 2.1 v-onディレクティブにオブジェクト形式で指定する例

v-onディレクティブ

Vue.jsのv-onディレクティブを使用すると、HTMLテンプレートのDOM要素のイベントに処理をバインドすることができます。

v-onディレクティブでは、引数にclickやfocusなどのイベント名を指定します。
例えば、button要素のclickイベントで処理を行う場合は、次のようになります。

HTML

<div id="app">
  <button v-on:click="onClick">ボタン</button>
</div>

</div>

JavaScript

Vue.createApp({
  methods: {
    onClick: function() {
      console.log('ボタンがクリックされました。');
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

onClick: function() {

console.log('ボタンがクリックされました。');

}

}).mount('#app')

ここではv-onディレクティブで、methodsオプションに定義したメソッドをclickイベントにバインドしています。

上記の例のようにバインドするイベントが1つであれば特に問題ありませんが、バインドするイベントが複数ある場合は、すべてのイベントに対してv-onディレクティブでのバインドを記述する必要があります。

例えば以下のように、1つの要素に対して複数のイベントをバインドしている場合などです。

HTML

<div id="app">
  <input v-on:focus="onFocus"
            v-on:blur="onBlur"
            v-on:change="onChange" />
</div>

<input v-on:focus="onFocus"

v-on:blur="onBlur"

v-on:change="onChange" />

</div>

JavaScript

Vue.createApp({
  methods: {
    onFocus: function() {
      console.log('フォーカスイン！');
    },
    onBlur: function() {
      console.log('フォーカスアウト！');
    },
    onChange: function() {
      console.log('値が変更されました。');
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

onFocus: function() {

console.log('フォーカスイン！');

onBlur: function() {

console.log('フォーカスアウト！');

onChange: function() {

console.log('値が変更されました。');

}

}).mount('#app')

ここでは、input要素（テキストボックス）のfocusイベント、blurイベント、changeイベントの3つのイベントに対してそれぞれv-onディレクティブでmethodsオプションに定義したメソッドをバインドしています。

上記の方法では、バインドするイベントが多くなるとその度にv-onディレクティブを記述してイベントをバインドしなければなりません。

Vue.jsではこのように複数のイベントがある場合に1回のv-onディレクティブですべてのイベントをバインドするための記述方法が用意されています。

v-onディレクティブのオブジェクト記法

複数のイベントを1度のv-onディレクティブでバインドする場合は、オブジェクト形式のハッシュデータ（{キー: 値, キー: 値…}形式のデータ）を指定します。

v-onディレクティブにオブジェクト形式で指定する例

以下に、上記のinput要素のfocusイベント、blurイベント、changeイベントの3つのイベントを指定する例を示します。

<div id="app">
  <input v-on="{focus: onFocus, blur: onBlur, change: onChange}" />
</div>

</div>

オブジェクト形式で指定する場合は、「v-on=”」に続けてオブジェクトを記述し、最後に「”」を記述してv-onディレクティブの記述を閉じます。
オブジェクトが持つプロパティのキーにイベント名、値に式（methodsオプションに定義したメソッドなど）を指定します。

v-onディレクティブにバインドするオブジェクトは、JavaScript側に記述することもできます。
以下に上記のinput要素のfocusイベント、blurイベント、changeイベントの3つのイベントを指定する例を示します。

HTML

<div id="app">
  <input v-on="textEvents" />
</div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      textEvents: {
        'focus': this.onFocus,
        'blur': this.onBlur,
        'change': this.onChange,
      }
    }
  },
  methods: {
    onFocus: function() {
      console.log('フォーカスイン');
    },
    onBlur: function() {
      console.log('フォーカスアウト');
    },
    onChange: function() {
      console.log('値変更');
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

textEvents: {

'focus': this.onFocus,

'blur': this.onBlur,

'change': this.onChange,

}

methods: {

onFocus: function() {

console.log('フォーカスイン');

onBlur: function() {

console.log('フォーカスアウト');

onChange: function() {

console.log('値変更');

}

}).mount('#app')

上記の例では、dataオプションにイベントとメソッドをオブジェクト形式で定義した、textEventsプロパティをv-onディレクティブでバインドしています。
JavaScript（Vueインスタンス）側でオブジェクトを定義する場合は、イベントにバインドする値に式を指定しますので、methodsオプションに定義したメソッドを指定する場合にthis修飾子が必要になります。

Vue.js 入門 Tips 一覧

リンク