首页 > 其他分享 >$forceUpdate和this.$set('userInfo',name,'小红');

$forceUpdate和this.$set('userInfo',name,'小红');

时间:2022-12-12 09:13:23浏览次数:68  
标签:set name 小红 userInfo forceUpdate 页面

在Vue官方文档中指出,$forceUpdate具有强制刷新的作用。

那在vue框架中,如果data中有一个变量:age,修改他,页面会自动更新。
但如果data中的变量为数组或对象,我们直接去给某个对象或数组添加属性,页面是识别不到的

1 2 3 4 1 2 3 4 5 6 7 8 9 10 11 12 在updateName函数中,我们尝试给userInfo对象修改值,发现页面其实并没有变化

那这时候有两种解决方法:
方法一:

methods:{
updateName(){
this.userInfo.name='小红'//在此时,确实已经将userInfo对象修改完成
console.log(this.userInfo.name);//输出结果: 小红
this.$forceUpdate();//在这里,强制刷新之后,页面的结果变为'小红'
}
}
1
2
3
4
5
6
7
方法二:

methods:{
updateName(){
this.$set('userInfo',name,'小红');
}
}
————————————————
版权声明:本文为CSDN博主「爱吃的前端程序员」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/y521123y/article/details/106257818

标签:set,name,小红,userInfo,forceUpdate,页面
From: https://www.cnblogs.com/ywjbalabala/p/16975181.html

相关文章