Vue クリックイベントの引数でdata内の値を参照したい

Question

<template>
  <div> 
    <button @click="hoge(this.name)">ボタン</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      name: 'taro'
    }
  },
methods: {
 hoge(name){
  console.log(name)
// ⬆︎ taroが出力されるのが理想
 }
}
</script>

イメージは上記のようなのですが、buttonのクリックイベントの引数でdata内の値の参照の仕方が分かりません。

ご存知の方がいらっしゃいましたらご回答お待ちしております。

よろしくお願い致します。

Answer 1

thisは不要です。
例えば下記のような構造なら、@click="hoge(name)"だけで動作します。

// ...
data: {
  name : "name",
},
methods : {
  hoge : function(data) {
    alert(data);
  }
},
// ...

Comments

[Motonosuke]

nekoniki様　ご教授ありがとうございます！
ちなみになのですが、似たような状況でimportしてきたタグ（例...<ShareNetWork url= 〇〇 title=〇〇></ShareNetWork>とした場合に〇〇の参照をdata内の値にする場合はどのような参照方法があるかご存知でしょうか？

[nekoniki]

基本的に回答したものと同じです。
例えば質問文中のソースでnameをShareNetWorkのurlに渡す場合、
<ShareNetWork :url="name" >
のように書きます。

[Motonosuke]

度重なるご回答ありがとうございます！！
ご教授通りに実装したところ、思い通りの挙動が確認できました。
ようやく原因解明ができました。
再度、ありがとうございます。