VUE的钩子函数中的回调函数如何调用data的数据或者给data赋值

4 15 20 1C

已于 2022-08-20 15:06:40 修改

阅读量995

点赞数 2

文章标签： Vue Swiper 回调函数 this指向 Vue实例绑定

于 2022-08-20 14:44:03 首次发布

本文链接：https://blog.csdn.net/M40153c/article/details/126439413

版权

以下直接赋值是无法给index赋值的

data(){
	return{
		index: ""
	}
}
mounted: {
	var mySwiper = new Swiper('.swiper-container', {
       
        on: {
            //这是swiper中的一个回调函数，返回当前swiper的索引值
          slideChangeTransitionStart() {
            this.index = this.activeIndex
            console.log("data中的index", this.index)//打印出来的this.index是undefined
          },
        }
  });
}

因为此时的函数内部绑定的this是该函数下的this，而不是vue中的this值，如果想完成绑定，我们可以将this保存后再使用，实现的代码如下：

data(){
	return{
		index: ""
	}
}
mounted: {
	var mySwiper = new Swiper('.swiper-container', {
       
        on: {
            //这是swiper中的一个回调函数，返回当前swiper的索引值
          slideChangeTransitionStart() {
            let _this = this
            _this.index = this.activeIndex
            console.log("data中的index", this.index)
            //打印出来的this.index是和this.activeIndex同值
          },
        }
  });
}

如果调用data里面的数据也是和上面同理