edy hub

プログラミングやライフスタイルについて書き綴っています

トップ > vue > 【Vue.js】v-onディレクティブに引数を渡す

【Vue.js】v-onディレクティブに引数を渡す

vue

v-onディレクティブに引数を渡すのは非常に簡単です。

引数を渡す前

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp">カウントアップ</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function() {
      this.number += 1
    }
  }
})

f:id:yuki-eda0629:20190922171912p:plain
画面表示

このような表示になっています。 ボタン押下時にカウント数が1ずつ増加していきます。

今回の変更

さて、ここでcountUpメソッドに引数を渡して、1クリックでのカウントを3倍にしてみましょう。

html側のcountUpに3という数値を渡します。

<div id="app">
  <p>現在{{ number }}回クリックされています</p>
  <button v-on:click="countUp(3)">カウントアップ</button>
</div>

続いて、jsはこのように変更します

new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    countUp: function(times) { // timesとして数値を受け取る
      this.number += 1 * times // timesを掛ける
    }
  }
})

これで、1クリックで3ずつインクリメントされるようになりました！ 引数を渡すのも直感的でわかりやすいですね！

さらに発展（eventを取得する）

eventオブジェクトに起因するデータに対して、引数を元に何らかの処理を加えたいケースもありますよね。

その場合は、渡したい引数に加えて、$eventを引数に加えます。

渡す位置に決まりはなく、順不同です。

例えば、テキストにマウスカーソルを当てたときに、そのカーソルのブラウザ上の位置を取得してX座標、Y座標として表示したいとき。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p v-on:mousemove="changeMousePosition">マウスを載せてください</p>
  <p>X: {{x}}, Y: {{y}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    changeMousePosition: function(event) {
      this.x = event.clientX;
      this.y = event.clientY;
    }
  }
})

f:id:yuki-eda0629:20190922173233p:plain
位置情報を取得

では、引数を渡してこの座標を半分にしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Vue.js App</title>
    <link rel="href + exp" href="main.css">
</head>
<body>
<div id="app">
  <p v-on:mousemove="changeMousePosition(2, $event)">マウスを載せてください</p>
  <p>X: {{x}}, Y: {{y}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="sample.js"></script>
</body>
</html>

new Vue({
  el: '#app',
  data: {
    number: 0,
    x: 0,
    y: 0
  },
  methods: {
    changeMousePosition: function(divideNum, event) {
      this.x = event.clientX / devideNum;
      this.y = event.clientY / devideNum;
    }
  }
})

htmlファイルでは、$eventという特別な変数を用いています。 これで、Vueで定義したメソッドにDOMイベントを渡すことができるようになります。

参考

jp.vuejs.org