vue中this.$set修改数组,数据改变视图层不更新

举报
猫先生c 发表于 2022/11/20 22:06:38 2022/11/20
【摘要】 向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 `this.myObject.newProperty = 'hi'`)

this.$set( target, propertyName/index, value )用法:

  1. {Object | Array} target
  2. {string | number} propertyName/index
  3. {any} value

(官方解释)

  • 用法
    向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

  • 总结
    1、动态修改的数据必须在data
    2、修改某属性的值数据改变视图层也改变的条件:该属性初始化必须在该属性所在数据源中或者由this.$set做的新增属性,后面对该属性进行操作才能监听到该属性

demo

obj:{
name:"zhangsan",
age:"15"
}
  1. 新增sex属性 this.obj.sex='男'
  2. 通过对象修改sex属性 this.obj.sex='女',此时数据改变,视图未更新
  3. 通过this.$set修改this.$set(obj,'sex','女') ,发现数据改变,视图未更新,与第2.出现相同的现象
  4. 原因:obj中没有sex属性,this.$set(obj,'sex','女')只能做修改,vue.set( )可以做县呢过,然后对obj.sex做操作的话才能够监听到sex,视图层才会更新
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。