vue 修改对象属性没有渲染页面_解决Vue数组中对象属性变化页面不渲染问题_百厌_前端开发者...

墨蓝 2022-12-31 14:24 629阅读 0赞

做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。

换了关键词搜索找到了相关方法。

其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。

数组更新检测

变异方法

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

你打开控制台，然后用前面例子的 items 数组调用变异方法：example1.items.push(\{ message: ‘Baz’ \}) 。

替换数组

变异方法 (mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) \{

return item.message.match(/Foo/)

\})

你可能认为这将导致

注意事项

由于 JavaScript 的限制，

当你利用索引直接设置一个项时，例如：vm.items\[indexOfItem\] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一类问题，以下两种方式都可以实现和 vm.items\[indexOfItem\] = newValue 相同的效果，同时也将触发状态更新：

//

为了解决第二类问题，你可以使用 splice：

example1.items.splice(newLength)

对象更改检测注意事项

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue(\{

data: \{

a: 1

\}

\})

// \`vm.a\` 现在是响应式的

vm.b = 2

// \`vm.b\` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue(\{

data: \{

userProfile: \{

name: 'Anika'

\}

\}

\})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

this.$set(this.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 \_.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(this.userProfile, \{

age: 27,

favoriteColor: 'Vue Green'

\})

你应该这样做：

this.userProfile = Object.assign(\{\}, this.userProfile, \{

age: 27,

favoriteColor: 'Vue Green'

\})

以上这篇解决vue数组中对象属性变化页面不渲染问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持前端开发者。

发表评论取消回复

表情：

评论列表（有 0 条评论，629人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 修改对象属性没有渲染页面_解决Vue数组中对象属性变化页面不渲染问题_百厌_前端开发者...

做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档

墨蓝/ 2022年12月31日 14:24/ 0 赞/ 630 阅读

相关 vue修改数据页面不重新渲染

vue修改数据页面不重新渲染使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div>

柔情只为你懂/ 2022年12月24日 04:57/ 0 赞/ 247 阅读

相关 VUE_uniapp、vue 中data 数组更新后页面不同步动态渲染更新

错误做法：直接对数据元素进行更改，错误做法： // 不能动态响应 this.photoArr[index].weight= 200; 这种修改方式确

朴灿烈づ我的快乐病毒、/ 2022年12月12日 15:15/ 0 赞/ 466 阅读

相关 [解决问题]vue el-table的data更新但页面没有及时渲染

前言本来在网上找了一些解决方案，说给table加上key就可以，然后我试了一下发现显示的还是上次渲染的数据。然后循着这个路子摸出了另一个方法捋思路需求

太过爱你忘了你带给我的痛/ 2022年12月02日 10:47/ 0 赞/ 974 阅读

相关 vue之修改v-model页面不渲染

在created 里给变量input框赋值后页面没有任何改变,v-model bug了么打了断点发现修改input框其实this 已经拿到值了至于页面刷新的问

水深无声/ 2022年10月11日 00:58/ 0 赞/ 268 阅读

相关在前端开发中，页面渲染指什么

从上面这个图中，我们可以看到那么几个事： 1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文

拼搏现实的明天。/ 2022年05月06日 06:38/ 0 赞/ 165 阅读

相关 vue2强制刷新，解决页面不会重新渲染的问题

问题描述：在使用Vue框架开发时，在函数中改变了页面中的某个值，在函数中查看是修改成功了，但在页面中没有及时刷新改变后的值；解决：运用 this.$forc

ゝ一世哀愁。/ 2022年01月07日 14:15/ 0 赞/ 420 阅读

相关 vue页面渲染是闪烁{{}}

因为vue需要对页面进行解析，所以在完成之前，会看到\{ \{\}\}之类的代码。解决方法：v-cloak。在声明的对象上加上v-cloak <div id="

叁歲伎倆/ 2021年09月27日 05:52/ 0 赞/ 412 阅读

相关 Vue的修改数据页面不重新渲染

需求：通过一个数组渲染出商品列表，现在我通过价格对数组内的商品进行排序，希望改变数组后重新渲染商品列表。问题：数组改变之后并没有重新渲染。测试流程：

╰半橙微兮°/ 2021年09月18日 02:22/ 0 赞/ 476 阅读

相关 vue修改数据页面不重新渲染

使用vue，遇到几次修改了对象的属性后，页面并不重新渲染，模拟案例如下： <template> <div> <div v-for="(it

迈不过友情╰/ 2021年07月26日 14:29/ 0 赞/ 891 阅读