码迷,mamicode.com
首页 > Web开发 > 详细

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

时间:2020-03-02 13:11:09      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:好的   点击事件   数据   mount   侦听器   图片   效果   获取   png   

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

Vue在渲染页面的时候使用jQuery的时候会发现当在created生命周期中获取后台数据,写在 mounted 生命周期的jquery渲染的点击事件不管用了。
理论上,mounted是界面html生成结束才会开始执行的,应该是可以的,但实际效果就是不行。

原因

问题的原因出现在,jquery确实在界面HTML生成之后执行了,但是当时向后台请求的数据还没请求回来,当请求回来用for循环重新渲染数据后,jquery已经执行完了,所以说新数据渲染的标签并没有jquery
的方法。

解决办法

使用vue不适合jquery来渲染数据,如果非得用jquery渲染的话,比较好的办法就是使用一个侦听器(watch)来监听数据的变化,当请求回数据来的时候在使用jquery渲染。
当然这还有问题,就是请求回来数据不代表已经在界面for循环完了,所以要延时10毫秒左右之后再执行jquery渲染,这样,就解决了这个问题。

技术图片

设置一个侦听器侦听 goodsDetails 的变化,当请求回数据,赋值给 goodsDetails 时,goodsDetails 发生变化,被侦听器检测到,调用useJquery 方法,重新渲染。
技术图片
调用jquery方法渲染的时候,使用计时器延时10毫秒左右。

完成!

Vue 接收数据for循环渲染出的标签jQuery渲染的点击事件无效

标签:好的   点击事件   数据   mount   侦听器   图片   效果   获取   png   

原文地址:https://www.cnblogs.com/wjw1014/p/12394641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!