要在如下的html中渲染一个uploader数据
<el-col :span="24">
<el-form-item label="上传人" >
<span style="color:red;">{{form.uploader}}</span>
<!-- <span v-else style="color:red;">{{username}}</span> -->
</el-form-item>
</el-col>
正确写法一
created(){
//要在created里面直接赋值的话 uploader能赋上值,但是在上面的标签中是渲染不出来的
let _this = this
setTimeout(function(){
_this.form.uploader = _this.$store.state.user.username==null? 'userinfo里为null':_this.$store.state.user.username; // 定时器里是拿不到this的,需要更改指向
},100)
},
正确写法二
computed: {
...mapGetters([
'username' //这个值是store里面存的值
])
},
错误写法
created(){
// 这里这样写打debugger uploader也能赋值,但是页面渲染并没有值
this.form.uploader = this.$store.state.user.username==null? 'userinfo里为null':this.$store.state.user.username;
},
分析了一下, 是this的指向问题, 打印一下,结果this的指向是正常的,
那么我们再来看vue的生命周期问题
官网的介绍
也就是说页面挂载阶段还没开始
this.form.uploader,已经被赋值了,
但是页面渲染后仍然没有值
百思不得其解
如果有朋友碰到了同样的问题找到了问题所在还请不吝赐教