如何在vue-slick轮播的afterChange事件中获取data属性值？

你当前代码里this.$el.getAttribute('data-items')拿到的是vue-slick组件根元素的属性，而非当前显示幻灯片对应的<a>标签的data-items，所以取不到正确数据。以下是两种可行解决方案：

方案一：直接从数据源获取（推荐，符合Vue数据驱动思想） #

既然currentSlide是当前幻灯片的索引，直接用该索引从mainBanner数组中取出对应数据即可，无需操作DOM：

methods: {
  handleAfterChange (event, slick, currentSlide) {
    // 从数据源直接获取当前slide的对应数据
    const currentBanner = this.mainBanner[currentSlide]
    const reportData = {
      name: currentBanner.fields.image.fields.file.fileName,
      img: currentBanner.fields.image.fields.file.url
    }
    // 上报到Google Analytics
    // ga('send', 'event', 'Banner', 'slideChange', reportData.name, { dimension1: reportData.img });
    console.log('上报数据：', reportData)
  }
}

方案二：从DOM元素中读取data-items属性 #

如果必须通过DOM获取，可以借助slick对象找到当前激活的幻灯片元素，再读取其data-items：

methods: {
  handleAfterChange (event, slick, currentSlide) {
    // 获取当前激活的slide对应的<a>标签元素
    const currentSlideEl = slick.$slides[currentSlide]
    // 读取data-items属性并解析为对象
    const reportData = JSON.parse(currentSlideEl.dataset.items)
    // 上报到Google Analytics
    // ga('send', 'event', 'Banner', 'slideChange', reportData.name, { dimension1: reportData.img });
    console.log('上报数据：', reportData)
  }
}

注意：dataset.items会自动把data-items转换为驼峰式的items，且属性值为字符串，需要用JSON.parse解析成对象。

内容的提问来源于stack exchange，提问作者fikfe