在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显示声明,就能做到视图更新。

终于视图生效啦~~~~

 

 

Logo

前往低代码交流专区

更多推荐