v-forで展開した配列のうちの一つをクリックし、その詳細を取得したいです。

Question

Vue.jsを勉強し始めた者です。
v-forで配列を展開し、そのうちの一つをクリックすると(v-on:clickを使って)その説明文(今回の内容だとtext)が現れるようにしたいです。
その際のメソッドの書き方がわかりません。

data: {
 detail: " "
 }

として用意し、
のitem.textをmethodsを使って、detailに代入し表示させようとしたのですがうまくいきませんでした。
どのようにすればthis.detailに任意のitem.textを代入またはitem.textを表示させることができるのでしょうか？

以下ソースコードです

 var items = [
  { 
    name:'鉛筆',
    text: '使いかけの古い鉛筆です。'
  },
  {
    name:'ノート',
    text: '方眼罫でグラフが描きやすい！'
  },
  {
    name:'消しゴム',
    text: '2020年グッドデザイン賞受賞'
  }
]

var vm = new Vue({
  el: '#app',
  data: {
    items: items,
    detail: ''
  },
　methods: {
    showDetail: function(){
      this.detail = 
    }
  }

 <div id="app">
    <ul>
      <p>詳細を知りたい商品をクリックしてね！</p>
      <li v-for="item in items" v-bind:key='item.name' >
        <p v-on:click="showDetail">{{ item.name }}</p>
      </li>
    </ul>
    <hr>
    {{ detail }}
    <hr>
 </div>

ご回答お願いいたします。

Answer 1

方法は2つあります。

1つ目はclickイベント内で代入する方法です。この場合はshowDetailメソッドは不要です。

<li v-for="item in items" v-bind:key="item.name" >
  <p v-on:click="detail = item.text">{{ item.name }}</p>
</li>

showDetailメソッドをどうしても使いたい場合は、以下のようにも実装できます。

<li v-for="item in items" v-bind:key="item.name" >
  <p v-on:click="showDetail(item.text)">{{ item.name }}</p>
</li>

methods: {
  showDetail(text) {
    this.detail = text
  }
}

Comments

[fujicho]

自己解決と被ってしまいました。
ご回答ありがとうございます！
clickイベント内でも可能なのですね。参考になりました。

[rubytomato]

解決されたようで良かったです。少しでも参考になりましたら幸いです。

Answer 2

v-on:click="showDetail(item.text)"
と記述し、methodsのshowDetailにて

showDetail: function(text){
      this.detail = text
    }

と書くことで解決しました。
v-onの引数にitem.textと記述することができる、ということが分からなかったのが原因です。