vue数据改变了，视图不更新不刷新问题

描述：在对象中添加一个属性 seen，初始想法使用for循环添加 seen 属性，然后改变这个属性去更新视图，然后发现不行。

解决，使用$set：

this.$set(item, 'seen', false)

代码：

// 请求来的数据，在 res.results 中没有seen这个属性，添加这个属性
this.worklogs = res.results
res.results.forEach(item => {this.$set(item, 'seen', false)
})

// 改变这个属性来控制显示隐藏
showDesc(log) {log.seen = !log.seen
}

对象更改检测

在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性，但是可以使用$set方法将相应属性添加到嵌套的对象上。

已经声明的属性正常响应的，没有声明的属性虽然值发生了改变，console也能打印出来，但并不能响应到视图上。需要用Vue.set(object, key, value) 或 this.$set(object,key,value) 方法将响应属性添加到嵌套的对象上。

注意：object 必须是在data中已经声明的对象。

// this.form.testB = 'desc' // 无效
this.$set(this.form,'testB ','desc') // 动态添加
// 或者 Vue.set(vm.form,'testB ','desc')

Object.assign方法，向嵌套对象上添加多个属性。object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。

语法：vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })

注意：object 必须是在data中已经声明的对象。

this.form1 = Object.assign({}, this.form1, {f1:'f1',f2:'f2'})

数组更改问题

vue检测不到变动问题：1、利用索引直接设置一个项；2、修改数组长度。

1、

changeMe(index) {// this.trees[index] = 'xxx' // 无响应this.$set(this.trees, index, 'xxx') // 有响应// this.trees.splice(index, 1, 'xxx') // 有响应
}

2、

// 改变数组长度
// this.trees.length = 2 // 无响应
this.trees.splice(2) // 有响应

感谢作者：

https://www.cnblogs.com/YuKiee/p/9681151.html

vue数据改变了，视图不更新不刷新问题相关推荐

Vue数组改变，视图不更新解决方案
列表渲染 - Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/list.html#%E ...
safair中vue修改了数据，但是视图没有更新解决方案
使用vuex,也适用了splice来改数据, 修改了评论的数据,但是视图没有更新. state.tabContainer.splice(index, 1, {info: info}); 查看dom元素 ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...
vue数组中数据变化但是视图没有更新解决方案
vue数组中数据变化但是视图没有更新解决方案参考文章: (1)vue数组中数据变化但是视图没有更新解决方案 (2)https://www.cnblogs.com/sufubo/p/6906261.h ...
Vue数据改变视图不更新的问题
首先说下在什么情况下会出现这种情况以及解决方案在vue2中用数组下标修改值时或者新增对象Key值时这样vue的devsrve函数是监听不到数据的变化的所以就会导致数据更新视图未更新 1.数组利用下 ...
Angular URL地址参数改变，视图不更新的解决办法(监听URL变化，重新加载数据方法)
import { ActivatedRoute,Router,NavigationEnd } from '@angular/router'; //钩子(组件组装完成之后调用的方法,仅调用一次)ngAf ...
vue 数据改变页面没有实时渲染(不是一般的情况, 如果一般情况无法解决可能是这个原因)
css3里面的渐变色属性 background-image: linear-gradient(121deg, rgba(36, 237, 255, 1) 0%, rgba(24, 102, 231, ...
vue数据改变渲染问题_解决Vue中页面成功渲染数据undefined的问题
前言这个标题不太好取. 本文需要下面的知识:https://zhuanlan.zhihu.com/p/260811233zhuanlan.zhihu.com 问题描述我最近的一个功能需求是通过a ...
vue数组改变但是页面不更新的解决方案
分类 1.由于javascript的限制,某些情况vue会监听不到数组的变化,例如:items[index] = newitem 2.或者是数组结构过于复杂和深度过深,也可能导致更新出现问题. 解决方 ...

vue数据改变了，视图不更新不刷新问题

vue数据改变了，视图不更新不刷新问题

vue数据改变了，视图不更新不刷新问题相关推荐

最新文章

热门文章