解决vue中对象属性改变视图不更新的问题
更新时间：2018年02月23日 09:10:54 作者：涵一
下面小编就为大家分享一篇解决vue中对象属性改变视图不更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
常规情况下我们在vue实例的data中设置响应数据。但当数据为对象，我们增加或删除对象属性值时，视图并不触发更新，如何解决这个问题呢？
实例代码如下：
let vm = new Vue{
el: '#app',
data: {
obj: {
k: 'v'
}
},
...
}
有三种解决方案：
方案一：利用Vue.set(object,key,val)
例：Vue.set(vm.obj,'k1','v1')
方案二：利用this.$set(this.obj,key,val)
例：this.$set(this.obj,'k1','v1')
方案三：利用Object.assign({}，this.obj)创建新对象
例：
this.obj.k1='v1'；
this.obj = Object.assign({}, this.obj)
或
this.obj = Object.assign({}, this.obj,{'k1','v1'})
以上这篇解决vue中对象属性改变视图不更新的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue项目, 在实际工作中, 有些时候需要在 加载完某些数据之后对当前页面进行刷新, 这篇文章主要为大家介绍了三种常用方法,需要的可以参考一下2023-10-10
这篇文章主要介绍了使用webpack搭建vue项目的方法，本文以开发环境为例，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了Vue基础语法知识梳理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-12-12
这篇文章主要介绍了讲解vue-router之什么是嵌套路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue搭建本地JSON静态数据服务器全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文分步骤给大家介绍了Vue使用枚举类型实现HTML下拉框的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
vue element-ui el-date-picker限制选择时间为当天之前的代码
这篇文章主要介绍了vue element-ui el-date-picker如何限制选择时间为当天之前,文中给大家提供了代码段和截图，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-11-11
这篇文章主要为大家介绍了vue.js项目中使用原生js实现移动端的轮播图，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这篇文章主要介绍了Vue3 函数式弹窗的实例小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
最新评论