イベントを1回のみ実行するv-onディレクティブの.once修飾子 [Vue.js]

Vue.jsではv-onディレクティブを使用することで、HTMLの要素のイベントにイベントハンドラーのメソッドをバインドして処理を行うことができます。

v-onディレクティブでバインドしたメソッドは、clickやchangeなどのイベントが発生するたびに実行されますが、アプリケーションの仕様によっては、イベントを初回の1回のみだけ実行したい場合があります。

Vue.jsのには、v-onディレクティブでイベントをバインドする際に、1回のみイベントハンドラーが呼び出されるようにするための方法が用意されています。

そこで今回は、v-onディレクティブでイベントをバインドする際に、1度だけ処理を実行できるようにする.onceディレクティブを紹介します。

1 v-onディレクティブの.once修飾子
- 1.1 .once修飾子の書式
- 1.2 .once修飾子の動作
2 .once修飾子の使用例

v-onディレクティブの.once修飾子

.once修飾子は、v-onディレクティブでバインドしたイベントの既定の動作をキャンセルしますので、v-onディレクティブでバインドするイベントに続けて記載します。

.once修飾子の書式

.once修飾子は、v-onディレクティブを使用したイベントのバインド時に以下のように記載します。

<要素 v-on:イベント名.once="メソッド（または式）">

1	<要素 v-on:イベント名.once="メソッド（または式）">

.once修飾子の動作

.once修飾子をイベントに対して指定した時の動作は、イベントターゲットの要素にaddEventListener()メソッドでイベントリスナーを登録する際にaddEventListener()メソッドの第3引数のoptions に{ once: true }を指定した時と同様の動作になります。

EventTarget.addEventListener() – MDN

.once修飾子の使用例

以下に.once修飾子を使用した簡単なアプリケーションの実装例を示します。
ここでは、ボタンをクリックした時に1度だけイベントハンドラーのメソッド実行します。

HTML

<div id="app">
  <h2>
    おみくじ
  </h2>
  <button v-on:click.once="onClick">
    おみくじを引く
  </button>
  <hr>
  <div>
    結果： {{message}}
  </div>
</div>

<h2>

おみくじ

</h2>

おみくじを引く

</button>

<hr>

<div>

結果： {{message}}

</div>

JavaScript

const results = [
  '大吉',
  '吉',
  '中吉',
  '小吉',
  '末吉'
]

Vue.createApp({
  data: function() {
    return {
      message: ''
    }
  },
  methods: {
    onClick: function() {
      const index = Math.floor(Math.random() * 5);
      this.message = results[index];
    }
  }
}).mount('#app')

const results = [

'大吉',

'吉',

'中吉',

'小吉',

'末吉'

]

Vue.createApp({

data: function() {

return {

message: ''

}

methods: {

onClick: function() {

const index = Math.floor(Math.random() * 5);

this.message = results[index];

}

}).mount('#app')

上記のサンプルでは、今日の運勢を占う「おみくじ」アプリケーションを実装しています。
おみくじを引くボタンがクリックされた時にMathオブジェクトのrandomメソッドを使用して、おみくじの結果を求めれるための数値を取得しています。
数値は0から4までの5つの値が取得できるようにし、取得した数値に応じて「0: 大吉」「1: 吉」「2: 中吉」「3: 小吉」「4: 末吉」をdataオプションに定義したmessageプロパティに設定します。
messageプロパティの値は、マスタッシュ構文（{{}}）を使用して画面（ボタンの下）に表示しています。