关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效
前言
vue2 项目中使用vue-seamless-scroll,复制出来的数据点击无效,经过多方查找总结,终于解决问题了,写篇文章防止下次遇到
参考文章:
 vue-seamless-scroll 点击click失效
 【vue】vue-seamless-scroll点击事件失效
 关于vue轮播vue-seamless-scroll自动滚动插件复制出来的数据点击事件无效
 vue-seamless-scroll 滚动插件的使用及循环的列表点击事件不生效的解决方案
vue2项目中如何使用vue-seamless-scroll依赖,参考之前发布的文章:
 【vue】 vue-seamless-scroll 无缝滚动依赖
解决
使用此组件,第二轮数据点击事件失效,采用事件委托解决,父元素绑定一个点击事件@click='clickup($event)',子元素添加JSON.stringify(item)即当前行数据
<template>
  <div
    class="maintable"
    @click="clickup($event)"
    v-if="datalist && datalist.length > 0"
  >
    <vue-seamless-scroll :data="datalist" :class-option="listOption">
      <div class="onebox" v-for="(item, index) in datalist" :key="index">
        <div class="name" :title="item.xm">{{ item.xm }}</div>
        <div class="phone">{{ item.enSjh }}</div>
        <div class="cardnumber">
          {{ item.enSfzh }}
          <!-- {{ item.cardnumber | jmsjh }} -->
        </div>
        <div class="record" :data-obj="JSON.stringify(item)">
          <!-- :data-obj="JSON.stringify(item)" 传递参数 -->
          追踪记录查看
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>
 
点击事件
clickup(e) {
     // 使仅点击按钮触发点击事件
     let row = JSON.parse(e.target.dataset.obj); // 传递参数
     console.log(row,"当前行数据")
 },
 
下班~

                
            
        
浙公网安备 33010602011771号