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でフォームの入力値をチェックし、リアルタイムで取得する方法

2022.09.11
132
Vue.js

Vue.jsで配列要素を動的に追加する方法

2022.09.14
112
Vue.js

【簡単】Vue.jsとCSSを使ってハンバーガーメニューを実装する方法

2022.09.16
95
Vue.js

Vue.jsでslideDownとslideUpするアニメーションを実装する方法

2022.09.23
27