踩坑记录day1:
1.项目版本:
在vue中使用时,某些场景可能需要动态修改一些数据,今天在使用vue-awesome-swiper时就遇到了这个问题,在上述使用场景中,用到了swiper5的以下option:
几种常用数据都可以动态修改,比如点击按钮获取input框内容,在修改swiper的option,但是speed属性不可以,直接修改option的属性不行,会跳转到第一张图,然后卡死。 经过查找,最后发现,可以在on属性里observerUpdate钩子函数,在函数体里,this的指向就是swiper本身,经过一番查找,得知可以在this.params.speed中修改speed并且不会出现卡死情况,但是由于function里this指向问题,这里用到了localstorage进行数据传递。 不多逼逼 上图!
这里用的elementui,随便用什么都可以,点击按钮后:
此时本地数据存储好了,然后是observerUpdate:
这里注意,之所以不点击按钮直接修改data中的数据,是因为observerUpdate只能监听的到dom改变或者表单数据改变,监听不到button按下的事件,所以用了一个elementui的$confirm来触发observerupdate。 tips:如果要在on中的事件钩子中让this指向vue,可以用箭头函数,或者在外边定义一个_self=this。