Help us understand the problem. What is going on with this article?

【Vue.js】VM(view model) をメソッドの引数に渡す方法。

Vue には、 Vue インスタンス と呼ばれるものがある

(vue インスタンスについてはこちら参照)

メソッドの呼び元の Vue インスタンスへのアクセスは極めて簡単であった。

やりたいこと

template から method を呼んで、
呼んだタグを変数で扱いたい。

知ってた方法

vue インスタンスは以下のようにして取得ができる。
メソッドのコール元で、引数を指定しなかった場合、
メソッドの第1引数にわかってくるのである。

<template>
 <div v-on:click=clickAction></div>
</template>

<script>
 export default {
  methods: {
   /**
    * @param {Object} vm view model
    */
   clickAction(vm) {
     console.log(vm)
   }
  }
 }
</script>

知らなかった方法

しかし、呼び元で、vue インスタンス以外の値を引数で渡したい場合はどうなるのか

失敗例

<template>
 <div v-on:click="clickAction('hoge')"></div>
</template>
<script>
 export default {
  methods: {
   /**
    * @param {Object} vm "view model"
    * @param {String} str "meta variable"
    */
   clickAction(vm, str) {
     console.log(vm)
     console.log(str)
   }
  }
 }
</script>

これだとダメなのですね
実はこれですと

console.log(vm)
=> hoge
console.log(str)
=> undefined

となってしまい、
template から入れた第1引数は、そのまま第1引数に入ってしまい、
第2引数無しでメソッドを呼んでしまう。

成功例

なので答えは以下です。

<template>
 <div v-on:click="clickAction($event, 'hoge')"></div>
</template>
<script>
 export default {
  methods: {
   /**
    * @param {Object} vm "view model"
    * @param {String} str "meta variable"
    */
   clickAction(vm, str) {
     console.log(vm)
     console.log(str)
   }
  }
 }
</script>

メソッドの引数に
$envent を渡してあげます。

公式 に書いてありました。

時には、インラインステートメントハンドラでオリジナルの DOM イベントを参照したいこともあるでしょう。特別な $event 変数を使うことでメソッドに DOM イベントを渡すことができます:


また1つ賢くなりました。

これで、 メソッド側で DOM にアクションが容易く行えますね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした