vue数据更新,vue数据改变了,页面内容未更新
本文主要介绍了vue对无效数据页面修改的解决方案，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
vue修改的数据页面无效。对于更改数据后页面不会刷新的问题，以下案例有两种解决方案。
vue修改数据页面无效
在项目开发过程中，经常会遇到给数据中的对象添加属性的情况。
如下案例
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
/头
身体
div id=应用程序
Button @click=addAttribute()添加属性方法/按钮
p学生属性如下所示/p
保险商实验所
li学生“{item}}”中的v-for= item/Li
/ul
/div
脚本src=。/js/vue.js/script
脚本
新Vue({
埃尔： #app ，
数据：{
学生：{
名称：“zdx”
}
},
方法：{
addAttribute() {
this . student . age=18；//向student对象添加属性
console . log(this . student)；
}
}
})
/脚本
/body
/html
原因是由于JavaScript的限制，vue.js无法监控对象属性的添加和删除，因为vue组件初始化时会调用getter和setter方法，所以这个属性必须存在于数据中，视图层才会响应这个数据的变化。为了解决这个问题，
有两种解决方案
1.this.$set(obj, key, value) 或 vue.set(obj, key, value)
方法：{
addAttribute() {
//this . student . age=18；
这个。$set(this.student，年龄，18)；
console . log(this . student)；
}
}
2.Object.assign(target, sources)
方法：{
addAttribute() {
//this . student . age=18；
//这个。$set(this.student，年龄，18)；
this . student . age=18；
this.student=Object.assign({}，this . student)；
console . log(this . student)；
}
}
更改数据后页面不刷新的问题
今天和v-if开会控制标签切换的效果，没有反应。测试数据正常，但是页面没有呈现。
我查了很多资料。因为数据层次太多，渲染函数没有自动更新，需要手动刷新。
及格
这个。$ force update()；
强制刷新。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。