VUE：JS中进行数组对象赋值，页面不能实时回显

2023-09-17 09:30| 来源: 网络整理| 查看: 265

简介

VUE项目中，有时候进行数组对象赋值时，不能实时回显到页面中，但是打印又有新的数据在里面。

具体实现场景一：对象赋值新的属性时，页面不能回显。

原因：该对象本身是没有这个属性的。解决方案：

this.$set(obj, 属性名, 属性值)；

案例如：

this.$set(obj, "name", "张三"); 场景二：数组赋值新的属性时，页面不能回显。

原因：VUE中由于 JavaScript 的限制，Vue 不能检测数组第 i 个的修改操作。举例：习惯写法是如下的，但是能打印出来，页面不能回显。

data() { return: { arr: [ [], [], [] ] } }, methode() { init() { let arrTwo = [1, 2]; this.arr[1] = arrYwo; } }

**解决方案：**有效写法如下

data() { return: { arr: [ [], [], [] ] } }, methode() { init() { let arrTwo = [1, 2]; let newArr = [ ...this.arr ]; arrTwo.forEaach(item => { newArr.push(item); }) this.$set(arr, 1, [ ...newArr ]); } } 最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！

【本文地址】

公司简介

联系我们