uniapp小程序:追加数组中的对象属性,属性数据已经添加,视图不会改变

这篇具有很好参考价值的文章主要介绍了uniapp小程序:追加数组中的对象属性,属性数据已经添加,视图不会改变。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

场景复现:

由于业务需要,需要给数组中的每一个对象添加一个ischecked属性(Boolean)来控制复选框的选中状态,于是:

注意:buycargoodslists为数据源,初始数据源没有定义isChecked属性

for (let i = 0; i < this.buycargoodslists.length; i++) {
this.buycargoodslists[i].isChecked==true;
}

结果可想而知,在控制台查看操作后的数据源buycargoodslists:确实属性isCheck已经插进去了,但是视图没有变化

vue中,追加的对象属性通过直接赋值的方式得不到vue的数据追踪

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

vue官方给出的解决方式是:this.$set的方式进行赋值,有两种方式:

用法:this.$set(对象, 属性名, 属性值);文章来源地址https://www.toymoban.com/news/detail-517438.html


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

for (let i = 0; i < this.buycargoodslists.length; i++) {
this.$set(this.buycargoodslists[i], "isChecked", true);
}

到了这里,关于uniapp小程序:追加数组中的对象属性,属性数据已经添加,视图不会改变的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序使用setData修改数组中的指定下标的属性值

    因为小程序中分有逻辑层和渲染层等。所以需要用setdata函数,渲染到视图界面。普通的修改属性是通过 this.setData({aa:true}) 的方法设置,但是本人遇到一种情况,需要通过下标区改变数组某一项中的某属性的值,方法如下: 结构: js: 备注:通过 let checkProp = \\\"rightRoomList[\\\" +

    2024年02月15日
    浏览(38)
  • uniapp 中过滤获得数组中某个对象里id:1的数据

    JavaScript中的Array.filter()方法来过滤获取数组中某个对象里id:1的数据 延伸: filter() 创建一个新的数组,新数组的元素是符合指定条件的元素,不会检测空数组,不会改变原来的数组。 map() 返回一个新的数组,新数组的元素是原数组的元素按照顺序依次处理后的值。 foreach() 循

    2024年02月14日
    浏览(33)
  • 小程序this.setData修改对象、数组中的值

    在微信小程序的前端开发中,使用this.setData方法修改data中的值,其格式为 this.setData({ ‘参数名1’: 值1,‘参数名2’: 值2)} 注意:如果是简单变量,参数名可以不加引号。 下面提供2种方式对data中的对象、数组中的数据进行修改: 假设原数据为: 方式一:使用[‘字符串’]

    2024年04月25日
    浏览(34)
  • uniapp小程序 计算出渲染所需数据后,界面已经渲染完毕数据不更新 情景解决

    有一个界面,是一个别的界面跳转过来的界面,在这里,我正常在onload函数里,跟后端获取数据,然后!问题来了!我这个界面里有一个手风琴组件,自己写的那种,然后需要在拿到数据之后,计算这个数据里面的一个列表的高度,但等我算完了这个高度,界面已经渲染完了

    2024年02月11日
    浏览(38)
  • vuejs清空表单数据、删除对象中的空属性公共方法

    对于复杂数据,使用element自带的方法可能不能满足我们的需求,所以可以封装一个公共方法在全局。 一、清空表单数据: 二、删除对象中的空属性:

    2024年02月13日
    浏览(42)
  • 微信小程序this.setData修改对象、数组中的值

    在微信小程序的[前端开发]中,使用this.setData方法修改data中的值,其格式为: 需要注意的是,如果是简单变量,这里的参数名可以不加引号。 经过测试,可以使用3种方式对data中的对象、数组中的数据进行修改。 假设原数据为: 方式一: 使用字符串,例如: 方式二: 构造

    2024年02月10日
    浏览(47)
  • 【Vue】Vue的$ref属性为空对象或者为undefined问题及解决办法(涵盖uniapp/H5/微信小程序)

    目录 问题:获取this.$refs为空对象或者为undefined 原因一:在uniapp中,非H5端只能用于获取自定义组件,不能用于获取内置组件实例(如:view、text) 解决方法:ref在非H5端使用在自定义的组件 原因二:使用了版本过低的调试基础库 原因三:ref组件使用了条件渲染,即v-if、v-

    2024年02月09日
    浏览(41)
  • 【Unity3D】Release of invalid GC handle.当Unity试图访问已经被卸载的应用程序域中的对象

    Unity报错 Release of invalid GC handle. The handle is from previous domain. The release operation is skipped. 解答 这个错误通常发生在尝试访问或操作已经被卸载的应用程序域(Application Domain)中的对象时。在.NET中,应用程序域是一个隔离边界,它允许多个应用程序在同一个进程中运行,而不会相

    2024年02月03日
    浏览(44)
  • js中追加数据到数组的几种方式

    在JavaScript中,有多种方式可以向数组中追加数据,包括: push()方法:将一个或多个元素添加到数组的末尾,并返回新数组的长度。 var arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4] unshift()方法:将一个或多个元素添加到数组的开头,并返回新数组的长度。 var arr = [2, 3, 4

    2024年02月15日
    浏览(47)
  • uniapp读取(获取)缓存中的对象值(微信小程序)

    大家好!我是夏小花,今天是 2024年4月24日|农历三月十六 ,在我们日常开发中,做小程序可能会往缓存中存值或者是存对象,今天这篇博客文章主要是讲如何在微信小程序如何读取缓存中的值和如何向缓存中存值。 满满干货哦!!! 下面这段代码是基于uniapp进行向缓中存值

    2024年04月25日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包