【vue】点击获取循环列表的某一项内容

需求：

使用v-for循环遍历列表时候，点击列表项item, 可以获取item的相关信息。

效果👇：

利用@click="getData(item.id,item.title)" 方法传送

 代码🌰

<template>
  <div>
    <ul>
      <li
        class="item"
        v-for="item in arrData"
        :key="item.id"
        @click="getData(item.id,item.title)">
        {{ item.title }}id={{item.id}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arrData: [
        { id: 1, title: '爱我中华' },
        { id: 2, title: '祖国需要我的努力' },
        { id: 3, title: '义勇军进行曲' },
        { id: 4, title: '起来起来起来' },
      ]
    }
  },
  methods: {
    getData (id, title) {
      this.$message({
        message: `当前被点击的id= ${id}标题为:${title}`,
        type: 'success'
      })
    }
  }
}
</script>

<style scoped>
.item {
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  background: #e2e2e2;
  color: red;
}
.item:hover {
  background: #e2e234;
}
</style>