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

在使用VUE的过程中，会遇到这样一种情况， vue data 中的数据更新后，视图没有自动更新。

这个情况一般分为两种，

一种是数组的值改变，在改变数组的值的是时候使用索引值去更改某一项，这样视图不会实时更新

第二种情况是改变了对象的某一项，但是其他依赖这个数据的视图没更新

第一种情况是因为直接通过索引去改变数组，vue 对象监听不到他的变化所以没有更新。

----解决方法 1. Vue.set(example1.items[0], { childMsg: ‘Changed!‘}）

　　　　　　2.使用Vue的变异方法 pop() push() shift() unshift() revese() sort() splice() 也会触发视图更新

第二种情况是修改对象的属性，比如父组件和子组件公用一份数据，数据通过props传到子组件，在子组件中修改数据父组件中不会响应。

方案一：利用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)创建新对象

方案四：可以先删除掉该项，然后再使用set 去添加

原文地址：https://www.cnblogs.com/buxiugangzi/p/12050165.html

时间： 2024-07-29 00:59:07

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

vue中对象属性改变视图不更新

问题描述:第一次选择验证通过,再重新选择必填项校验不通过但是打印出来是有值的解决方法:利用Object.assign({},this.obj)创建新对象原文地址:https://www.cnblogs.com/bzdfn/p/10270569.html

前段时间做开发的时候用mqtt监听了服务端信息,推送过来的数据要变更数组里面的对象的数据,修改好后但是页面并没有更新,因为javascript机制,vue并不能检测到数组变化,也是查阅知道了$set()函数, 具体用法: arr.$set(index, { name : value }), index: 索引,name: 数组中对象的属性名, value: 要赋给属性的值 this.footerList.$set(i, { siteId : monitorSiteData[j].siteId,

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () { $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) { var b = { focus: "black",

JavaScript中对象属性的添加和删除

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /* * 用.为对象添加属性用关键字delete删除属性用[]添加属性和.的不同 r.name==r["name"]; r.

vue中计算属性，方法，侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

Vue中计算属性

一般情况下属性都是放在data中的,但是有些属性可能是需要经过一些计算才能得出,那么,我们可以把这类属性变成计算属性.此时,需要将这些计算属性写到computed中,和将属性写在data中是一样的.表面上看,计算属性和methods一样,实际上,计算属性更加智能,他是基于它们的响应式依赖进行缓存的.也就是说,只要相关依赖(比如下面的例子中的“area”)没有发生变化,那么这个计算属性的函数就不会重新执行,而是直接返回之前的值.这个缓存功能使计算属性访问起来更高效. 计算属性set: set方法是

vue数组中对象属性变化页面不渲染问题

做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. ------------------------------------------- 数组更新检测变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splic

js 中对象--属性相关操作

查询属性: 可以用对象.属性来查询属性和属性方法或者对象[“属性”] 来查询属性和属性方法演示代码: 1 <script> 2 var obj ={ 3 username:"ziksang", 4 age:22, 5 addr:"北京", 6 say:function(){ 7 return "我的名字叫 "+this.username //解析this,此

javascript中对象属性搜索原则

为什么通过对象就能访问到原型中的属性或者方法? 属性搜索原则: 1 首先会在对象本身查找有没有该属性,如果有直接返回 2 如果没有,此时就会在构造函数中查找通过this给对象添加的成员中有没有,如果有就直接返回 3 如果没有, 就回到对象的原型对象中去查找,如果有,就返回 4 如果没有, 就会到原型对象的原型对象中查找.... 5 如此往复,如果最后也没有找到, 获取到的值就是: undefined