vue的data用到this问题

最新推荐文章于 2024-04-10 08:30:31 发布

转载最新推荐文章于 2024-04-10 08:30:31 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaowenxin/p/7412688.html

文章标签：

#javascript #ViewUI

本文介绍在Vue项目中如何正确使用swiper组件的onTap事件，并通过实例演示了如何在该事件中调用Vue的方法及获取Vue实例的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：在vue中用vue-awesome-swiper，在data中初始化，用到swiper一个方法onTap,然后再调vue的一个函数，用到this,可是。。。

      data() {
            return {
               baseUrl:baseUrl,
              imgList:[],
              this.swiperOption={
                 pagination: '.swiper-pagination',
                 direction: 'horizontal',//滑动方向：水平 垂直：vertical
                 slidesPerView: 1,//slider容器能够同时显示的slides数量
                 paginationClickable: true,
                 spaceBetween: 30,
              autoplay: 3000,
              loop: true,
              speed: 1000,
              onTap: function(swiper,event){
                    我要在这里用到vue的数据和方法
              }
            }
          }
        },

解决方法：

`data() {
  return {
    baseUrl:baseUrl,
    imgList:[],
    swiperOption:{},
   
  }
},
created(){
   var _this = this 
    _this.swiperOption={
      pagination: '.swiper-pagination',
      direction: 'horizontal',//滑动方向：水平 垂直：vertical
      slidesPerView: 1,//slider容器能够同时显示的slides数量
      paginationClickable: true,
      spaceBetween: 30,
      autoplay: 3000,
      loop: true,
      speed: 1000,
      onTap: function(swiper,event){
        var curPath = event.target.currentSrc.split(_this.baseUrl)[1];
        _this.getIndex(curPath)
      }
    }
},`

在data里先来一个空对象，在created中再来赋值，换一个思路解决!

转载于:https://www.cnblogs.com/zhaowenxin/p/7412688.html