Vue

【Vue.js 2.9】はじめてのVue.js イベント修飾子利用例

・イベント修飾子の一部内容紹介
・once,prevent,stop

はじめに

イベントハンドリングの中では1回のみの実行や対象のイベントでは行わないようにするなどの要件に対応するにはイベント修飾子を使います。

【Vue.js 2.9】はじめてのVue.js イベントハンドリング ・onClickイベントの記法・クリックイベント以外のイベント はじめに 今回はクリックなどのイベント時のハンドリングに...

環境情報

名前詳細
Vue.js開発バージョン(https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js
エディタJSFiddle(https://jsfiddle.net/

イベント修飾子の書き方

once

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <button v-on:click.once='getNowDateTime'>
    現在日時取得
  </button>
  <p>
    取得結果:{{ now }}
  </p>
</div>
var app = new Vue({
    el: '#app',
    data: {
      now: ''
    },
    methods: {
    	getNowDateTime: function(){
      	  this.now = new Date().toLocaleString()
        }
    }
})

onceはイベントに対して1度のみフックされます。
once修飾子の設定は簡単で、v-on:clickのあとにonceを追加するだけです。
clickに限らずイベントハンドリングに対してならonceを追加出来ます。

画像では分かりにくいですがボタンを2度押しても、1度目の結果が表示され続けます。

prevent

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <a href='https://www.google.co.jp/' v-on:click.prevent='testPrevent'>Link</a>
</div>
var app = new Vue({
    el: '#app',
    methods: {
    	testPrevent: function(event){
      	  console.log('testPrevent Exec');
        }
    }
})

prevent修飾子では既定の動作(AタグやSubmitの画面遷移など)をキャンセルします。
Javascriptでいうところの「preventDefault()」に当たります。

こちらも画像では分かりにくいですが、Link部分をクリックするとGoogleページに遷移しません。
(動作していることが分かるようにクリックするとログを出力ようにしています)

stop

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
  <div id='oya' v-on:click='testStopOya'>
    <p id='ko' v-on:click.stop='testStopKo'>
      Stop修飾子
    </p>
  </div>
</div>
var app = new Vue({
    el: '#app',
    methods: {
    	testStopOya: function(){
      	  console.log('testStopOya 親');
        },
        testStopKo: function(){
      	  console.log('testStopKo 子');
        }
    }
})

stop修飾子ではクリックイベントを連続している場合stop修飾子以降の処理をキャンセルします。
Javascriptでいうところの「stopPropagation()」に当たります。

こちらも画像では分かりにくいですが、文字列部分をクリックすると親と子タグのクリックイベントが本来動作しますが、子タグのクリックイベントでstop修飾子を設定しているため親タグのクリックイベントはキャンセルされます。

参考記事

[メモ]Vue.jsイベント修飾子一覧
https://qiita.com/Yorinton/items/f7eb54f05609750da7f5

  • おすすめの投稿がありません