前言

在 v-for 迴圈語句上，定義一個點選事件 傳入兩個引數（當行資料、當前事件物件），如下程式碼片段，當前事件物件必須加上 ‘$' 符號

<template>
 <div>
  <ul>
   <li
    v-for="(item,index) in arrData"
    :key="index"
    @click="operate(item,$event)"
   >
    {{ item.title }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 data() {
  return {
   arrData: [
    { id: 1,title: '第一條資料' },{ id: 2,title: '第二條資料' }
   ]
  };
 },methods: {
  operate(item,event) {
   console.log(item);
   console.log(event);
  }
 }
};
</script>

不加'$‘報錯：

加上'$‘: 點選行之後獲得當前行資料 以及當前事件物件

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

補充知識：vue獲取當前點選物件的下標，和當前點選物件的內容

如下所示：

<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>

data裡面宣告：

data() {
  return {
   tabList: [
    { id: 0,title: "首頁1" },{ id: 1,title: "首頁2" },title: "首頁3" }
   ],current:0
  };
 },

 methods: {
  addClass: function(index,event) {
   this.current = index;
   //獲取點選物件   
   var el = event.currentTarget;
   console.log("當前物件的內容："+el.innerHTML);
   console.log(this.current)
  }

以上這篇vue v-for 點選當前行,獲取當前行資料及event當前事件物件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。