vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

站长资源 2024/11/25 佚名

2 0 1

前言

在 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" },
    { id: 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当前事件对象的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

vue,v-for,点击行,行数据,event事件对象

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

更新日志

2024年11月25日

vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作

vue 实现一个简单的全局调用弹窗案例

vue 使用lodash实现对象数组深拷贝操作

评论“vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作”

更新日志

友情链接