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

墨蓝 2022-12-31 14:24 650阅读 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 条评论，650人围观）

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

相关阅读

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

前言更改了数组里面的某个对象的属性值后，相应的dom不更新解决方案–用vue.set() <script> export defau

古城微笑少年丶/ 2023年10月08日 10:24/ 0 赞/ 26 阅读

相关二、Vue 页面渲染过程

文章目录前言渲染过程番外前言上篇博文我们依葫芦画瓢已经将hello world 展现在界面上啦，但是是不是感觉新虚虚的，总觉得这么多文

Bertha 。/ 2023年06月23日 05:59/ 0 赞/ 30 阅读

相关 Vue2.0 解决watch对象属性变化监听不到问题

很早之前就遇到一个问题，父组件向子组件传值，子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化，今天终于找到为啥出现这种问题和解决办法

系统管理员/ 2023年06月10日 15:25/ 0 赞/ 31 阅读

相关 uni-app （vue ) 数据变化，页面不重新渲染的问题

前几天遇到一个问题 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

悠悠/ 2023年03月04日 11:30/ 0 赞/ 36 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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