vue更新obj类data的属性无效,页面data没刷新解决方法vue.set

问题描述

Vue的data使用有坑啊,它不能直接修改创建的对象的属性,例如想要给 user 添加一个 name 属性,值是 Jay 。

先来一个添加的错误示例(这是一个大坑,请注意),这样写页面不渲染,但是属性添加到了user对象,所以不会报错。

作为一个后端开发,被这个问题困扰了一下午,-_-||

下面介绍几种正确有效的写法

解决方法一

强制刷新数据。 这里用了 $forceUpdate() ,它可以强制刷新数据。

解决方法二

重写整个对象。因为在 data 里面创建了 user 对象,可以直接修改它,缺点是得重写整个对象。

解决方法三

重要知识点。Vue.set 方法。用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:

参数说明
  • target: 可以是对象或数组
  • key : 可以是字符串或数字
  • value: 可以是任何类型
使用代码示例

在Vue中,一般只有在data选项中声明的属性(或者是属性的属性)才是具有响应特性的。如果需要在data选项之外对已有属性添加(Vue 不允许动态添加根级响应式属性)具有响应特性的属性,需要用到Vue的set方法。

Vue文档中的例子

上例中的a就是在data中声明的具有响应特性的属性,而b就不是。

把上面的例子修改一下

在实际操作中,上例的a2虽然不是响应式的,但他却是可以在HTML部分被渲染更新出来。这里就是一个比较容易掉进去的坑了。由于Vue是异步执行DOM更新,虽然更新的动作是由this.a.a1 = “test”触发,可动作的完成是在this.a.a2 = “testtest”之后。

总结

最后我是用this.$set(this.a, ‘bb’, 121);这种方法来解决页面data属性没刷新的问题。

0

发表评论

邮箱地址不会被公开。