Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@yasudanaoya

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

More than 1 year has passed since last update.

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 にアクションが容易く行えますね。

0
Help us understand the problem. What is going on with this article?
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
yasudanaoya
Rookie front-end Engineer
wed
レシート買取アプリ「ONE」、OCR技術を用いた売上管理ツール「Zero」などを開発・運営しています。 その他に、お金がもらえる買い物サービス「C(シー)」や簡単に寄付できるアプリ「dim.(ディム)」を提供しています。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?