• Vue.js

Vue.jsで一回だけイベント処理を実行する方法

Vue.jsでclickイベントを使ってるが、処理が往復（トグル）してしまう。

トグル機能を無くして、１回だけイベント処理を実行する方法について知りたい。

本記事ではv-onディレクティブに.once修飾子を使って、このような悩みを解決します。

1回だけイベント処理を実行する方法

<div id="app">
  <button v-on:click.once="click">テキストを表示</button>
  <p v-show="show">テキスト</p>
</div>
<script>
	const app = Vue.createApp({
		data() {
			return {
				show: false
			}
		},
		// 1回だけクリックしたらテキストを表示
		methods: {
			click: function () {
				this.show = !this.show
			}
		},
	});
	app.mount("#app");
</script>

1回だけクリックイベント処理を実行するコード例です。

ボタンをクリックしたらテキストが表示されます。

トグル機能は発生しません。

一回だけイベント処理を実行するには、v-onディレクティブに.once修飾子を付与します。

使い方は以下の通りです。

v-on:click.once=”イベント名”

v-on:clickの後にドット（.）でonceを結合します。

以上で一回だけ処理が実行されるようになります。

まとめ

Vue.jsで一回だけイベント処理を実行する方法について紹介しました。

以上で解説を終わります。