当前位置: 首页 > 编程笔记 >

解决vue中对象属性改变视图不更新的问题

锺离霖
2023-03-14
本文向大家介绍解决vue中对象属性改变视图不更新的问题,包括了解决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 更改计算属性后select选中值不更改的问题,包括了解决vue 更改计算属性后select选中值不更改的问题的使用技巧和注意事项,需要的朋友参考一下 先上代码: 上面的代码就是采用vue的v-for指令绑定数据生成option,但今天学习写的时候突然发现一个问题,即将计算属性da绑定到v-for指令上,然后再替换源数据options,结果da计算属性正确,而selecte

  • 本文向大家介绍解决vue attr取不到属性值的问题,包括了解决vue attr取不到属性值的问题的使用技巧和注意事项,需要的朋友参考一下 js: html: 使用 ruleList.$nextTick(function () {}) 拿到更新后的dom 以上这篇解决vue attr取不到属性值的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍关于vue中watch检测到不到对象属性的变化的解决方法,包括了关于vue中watch检测到不到对象属性的变化的解决方法的使用技巧和注意事项,需要的朋友参考一下 前言 在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的。这……,有点难以置信! 正文 如结果所示,option.age已经更新,但是watch中的op

  • 本文向大家介绍解决Vue不能检测数组或对象变动的问题,包括了解决Vue不能检测数组或对象变动的问题的使用技巧和注意事项,需要的朋友参考一下 来看一个实例: 想实现的效果是点击 li 看 vm.nymbers[index] 是否存在,不存在设置为1,存在的话加1。 点击之后数字并没有在view层更新,而通过console打印发现数据更新了,只是view层没有及时的检测到。 再看一个改动之后的: 可以

  • 问题内容: 我只是阅读了watch()方法的Mozilla文档。它看起来非常有用。 但是,我找不到与Safari类似的东西。既不是Internet Explorer。 您如何管理跨浏览器的可移植性? 问题答案: 我不久前为此创建了一个小object.watch垫片。它适用于IE8,Safari,Chrome,Firefox,Opera等。

  • 在使用一个库的时候碰到了一个很奇怪的问题,有个class实例化生成的对象,假设为A 对A的属性进行修改 打印A发现,其中的a属性并没有变,但是直接打印A.a是改变了的,请问这种情况大概会是什么原因呢,是有什么知识盲区吗,目前知道a属性是不可删除的属性,但是一般对象设置configurable=false也不会出现这种情况,如果不允许修改的话应该也会报错。。 (PS:A只是为了表述简化的例子,并不是