Written by Kasumi

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

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

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

本記事では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で一回だけイベント処理を実行する方法について紹介しました。

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

目次

関連記事

Vue.js

Vue.jsでif文を使い条件分岐する方法

2022.08.27
1756
Vue.js

Vue.jsでclass属性を動的に追加する方法

2022.08.29
717
Vue.js

Vue.jsでスムーススクロールを実装する方法【vue-scrolltoライブラリを使おう】

2022.09.04
1107
Vue.js

Vue.jsでHTML要素をコンポーネント化(パーツ化)する方法

2022.09.01
580