DOMイベントごと変数で渡す #Vue.js

特別な $event変数を使うことでメソッドにDOMイベントを渡すことができます。

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="example">
    <p>{{ message }}</p>
    <button @click="say('こんちわ', $event)">こんにちは</button>
  </div>
<script>
let app = new Vue({
  el: '#example',
  data: {
    message: '挨拶'
  },
  methods: {
    say:function(message, event){
      console.log(event)
      this.message = message
    }
  }
})
</script>
</body>

ボタンを押すと

上を使って前の回のクリックカウントを２の倍数で表示させます。

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p>現在{{ number }}回クリックされています</p>
      <button v-on:click="countUp(2)">カウントアップ</button>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
          number: 0
        },
      methods: {
        countUp: function(times) {
          this.number += 1 *times
        }
      }
  })
</script>
</body>

上を使って前の回のXY座標のコードを１０で割って表示させます。

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p v-on:mousemove="mousePosition(10, $event)">マウスを乗せてください</p>
      <p>X:{{x}}、Y:{{y}}</p>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
          number: 0,
          x:0,
          y:0
        },
      methods: {
        mousePosition: function(divideNumber, event) {
          this.x = event.clientX / divideNumber;
          this.y = event.clientY / divideNumber;
        }
      }
  })
</script>
</body>

座標が１０で割った値となりました。