Vue数据改变视图不更新的问题

首先说下在什么情况下会出现这种情况以及解决方案

在vue2中用数组下标修改值时或者新增对象Key值时 这样vue的devsrve函数是监听不到数据的变化的所以就会导致数据更新视图未更新

1.数组利用下标修改值 (错误示范)

   new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.arr[0] = "列表0" // !错误的 这样是不响应的}}})

解决方案:

① 可以利用this.$set()

参数一：目标数据

参数二：目标数据的下标或者key值

参数三：所赋予的值

   new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.$set(this.arr, 0, "列表0")}}})

② 可以利用vue对数组重写的splice方法

    new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.arr.splice(0, 1, "列表0")}}})

③ 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可

   new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {let newArr = JSON.parse(JSON.stringify(this.arr))newArr[0] = "列表0"this.arr = newArr}}})

2.对象新增key值时 (错误示范)

new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.newObj.b="456" //！这样给对象新加key值得方式是不响应的}}})

解决方案

① 利用this.$set()

    new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.$set(this.newObj, "b", "456")}}})

② 重新声明一个变量深拷贝一下当前这个数组然后重新赋值即可

    new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {let copyObj = JSON.parse(JSON.stringify(this.newObj))copyObj.b = "456"this.newObj = copyObj}}})

③ 可以利用Object.assign()方法

    new Vue({el: "#app",data: {arr: ["列表1", '列表2'],newObj: { a: "123" }},methods: {upDateData() {this.newObj = Object.assign({}, this.newObj, { b: "456" })}}})

Vue数据改变视图不更新的问题相关推荐

vue 数组数据改变视图不更新解决方案
原数据 editFormData: {column_info_list: [ {'code': '','title': '','operate_type': 'openWeb','more_info' ...
vue数据改变了，视图不更新不刷新问题
vue数据改变了,视图不更新不刷新问题描述:在对象中添加一个属性 seen,初始想法使用for循环添加 seen 属性,然后改变这个属性去更新视图,然后发现不行. 解决,使用$set: this.$ ...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
解决vue中对象属性改变视图不更新的问题
解决vue中对象属性改变视图不更新的问题参考文章: (1)解决vue中对象属性改变视图不更新的问题 (2)https://www.cnblogs.com/buxiugangzi/p/12050165 ...
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 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
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数据改变视图不更新的问题

1.数组利用下标修改值 (错误示范)

2.对象新增key值时 (错误示范)

Vue数据改变视图不更新的问题相关推荐

最新文章

热门文章