记录一下Vue中的created函数所踩到的坑(回调函数不立即生效) |
您所在的位置:网站首页 › vue页面刷新获取不到参数 › 记录一下Vue中的created函数所踩到的坑(回调函数不立即生效) |
在Vue中,经常会在created函数中初始化页面内容。因此,我们常常会在created函数中通过请求后台的方式去获取数据。 getAction(this.url.getCurrentUser,{},"get").then(function(res){ if(res.success){ this.model.singlerCode= res.result.username; }else{ console.log("失败了") } })原本我是上面的这种写法。后来发现赋值全部失败了。 后来网上寻找一番,终于把代码改良了一下: this.$nextTick(()=>{ getAction(this.url.getCurrentUser,{},"get").then(function(res){ if(res.success){ this.model.singlerCode= res.result.username; }else{ console.log("失败了") } }) });可以看到,相比原来的,后面的代码增加了this.$nextTick, 原理参考:https://www.cnblogs.com/qhantime/p/11379826.html 简单的总结为:在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。 可是,我发现这样的代码还是无法赋值,于是我又修改: this.$nextTick(()=>{ getAction(this.url.getCurrentUser,{},"get").then((res)= >{ if(res.success){ this.model.singlerCode= res.result.username; }else{ console.log("失败了") } }) });
可以发现,function函数简化成了箭头函数,于是我又去百度了一番: 参考:https://blog.csdn.net/weixin_43789897/article/details/88905193 简单总结为this指向性的问题。感觉this是个大文章,此处不作深究,免得误人子弟。 但奇葩的是,我这么写结果仍然是不起作用的。 后来又改版了一下: this.$nextTick(()=>{ getAction(this.url.getCurrentUser,{},"get").then((res)=>{ if(res.success){ this.$set(this.model,'singlerCode',res.result.username); this.$set(this.model,'singler',res.result.realname); }else{ console.log("失败了") } }) });可以发现赋值方法变成了$set,因为我在this.model初始化的时候,赋值为{}。那么给this.model添加新属性的时候,可以this.model.singler = "123"之类的操作,也能生效,但是不会更新视图。而你用$set显示声明,就能做到视图更新。 终于视图生效啦~~~~
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |