vue父组件数据更新后,子组件页面没刷新

2023-10-27

 可以修改子组件绑定的key,这样子组件就会重新渲染

<view class="outerContainer" v-for="brandItem,brandIndex in goodsList" :key="brandItem.id"
			style="margin-bottom: 20rpx;">
			<view class="brandTitle">{{brandItem.name}}</view>
			<view class="brandItem"  v-for="goodItem,goodIndex in brandItem.detail"   > 
				<homeGoodsItem :goodItem="goodItem" @createOrder="createOrder" :key="goodItem.id"></homeGoodsItem>
			</view>
		</view>
onShow() {
			
// 修改key值,更新子组件,重置商品个数为1
    for(var i = 0; i < this.goodsList.length; i ++ ){
		for(var j = 0; j < this.goodsList[i].detail.length; j++){
			this.goodsList[i].detail[j].id++
		}
	}
}

当然,没有必要去重新渲染子组件,体验不好。key值改变之后,元素就没有复用了。 

因为vue监测不到数组的变化,数组有特殊性,可以使用this.$set()方法更新数组,就可以了。

async getGoodsList() {
				let result = await uni.$httpRequest({
					url: '/getGoodsList?type=2',
					method: 'get'
				}, {}, false)
				this.$set(this, "goodsList", result)
			},

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue父组件数据更新后,子组件页面没刷新 的相关文章

随机推荐

  • PHPStorm常用插件及安装方法

    进入 File gt Settings gt Plugins gt Browse repositories 搜索你想要的插件 推荐几个常用插件 env files support 可以在env函数使用是提示 env文件中所有的key值的自动
  • 鸿蒙开发初体验从注册开始带你跑第一个页面

    文章目录 1 HUAWEI DevEco Studio 1 1 运行环境要求 1 2 华为账号与实名认证 1 2 1 注册华为账号 1 2 2 实名认证 1 2 3 个人银行卡认证 1 3 下载和安装DevEco Studio 1 4 下载
  • C函数 printf 拼接字符串

    C函数 printf 拼接字符串 从前学C语言 最常用的函数可能就是 printf 了 但是往往是这样 printf 年龄是 d a 由于不懂得怎么拼接字符串 有时候只能用两个printf 语句 很难受 使用多个双引号 printf hel
  • 将普通Maven项目改成Web项目的步骤

    第一步 新建一个Maven项目 第二步 项目右键Properties 选择Project Facets 勾选Dynamic Web Module 第三步 点击下面的Further configuration available 第四步 设置
  • Selenium/webdriver介绍以及工作原理

    最近在看一些底层的东西 driver翻译过来是驱动 司机的意思 如果将webdriver比做成司机 竟然非常恰当 我们可以把WebDriver驱动浏览器类比成出租车司机开出租车 在开出租车时有三个角色 乘客 他 她告诉出租车司机去哪里 大概
  • zotero使用说明

    工欲善其事 必先利其器 Zotero作为一款文献管理软件 其所实现的功能满足了我对 文献管理 的所有想象 从基础的文献存储 文献分类 文献阅读 到文献阅读 笔记 文献之间的关联 再到丰富的插件 它像一个工具箱 阅读文献不再需要来自各个软件工
  • idrac给服务器重装系统,DELL服务器如何使用iDRAC安装操作系统

    一 IDRAC远程控制卡的介绍 iDRAC卡相当于是附加在服务器上的一台独立运行的小型pc 通过与服务器主板上的管理芯片BMC进行通信 监控与管理服务器的硬件状态信息 它拥有自己的系统和IP地址 与服务器上的OS无关 是服务器管理员进行远程
  • IOS UItableView 滚动到底 触发事件

    开发过程中 在使用UItableView 总会遇到加载更多的问题 到底是手势响应瀑布流的方法好 还是添加一个底端cell点击触发加载更多好 我也想有自己的判断 但是我们老板总说了算 没办法 谁叫我给人家打工呢 cell触发式略 这个很简单
  • stm32cube配置定时器

    STM32Cube 是一种支持 STM32 微控制器的软件工具 用于快速配置和生成嵌入式应用程序代码 在 STM32Cube 中配置定时器的步骤如下 打开 STM32CubeMX 工具 创建一个新工程 在 Pinout Configurat
  • r语言进行go富集分析_生信实操

    看图说话栏目曾介绍过GSEA的原理 看图说话 GSEA分析 教你解锁高级的富集分析 今天我们来看一下如何利用R语言进行GSEA分析 如果你有RNA seq的数据 就可以这样做 先把数据整成这样 一共两列 一列是SYMBOL 一列是foldC
  • Python 练习实例03:一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少?

    题目 一个整数 它加上100后是一个完全平方数 再加上168又是一个完全平方数 请问该数是多少 解题思路 首先根据题目体去除所需要的关键信息 什么是完全平方数 可以写成某个整数的平方的数1 1 4 2 9 3 1 首先 x 100 n 2
  • CICD 流程学习(一)Git 介绍与使用

    一 版本控制 1 基本概念 版本控制是管理修改的艺术 指对软件开发过程中各种程序代码 配置文件及说明文档等文件的变更管理 是软件管理配置的核心思想之一 2 版本控制的好处 优雅的备份 本地和服务器均保存备份文件 当文件出现问题时可以通过服务
  • 2019人工智能科普--汇总

    2019 3 2 中科馆大讲堂直播 从 流浪地球 到 三体 解读科幻与现实中的人工智能 https www cdstm cn zhibo 201902 t20190222 909511 html 关键点 1 人工智能 弱人工智能的应用 2
  • linux710权限可以吗,Linux权限管理

    一 基本权限 基本概述 不同用户有不同权限 在服务器上 每个用户都会定义合理的等级 一般只有一个管理员 其他都是普通用户 二 文件基本权限 1 Linux文件权限的设定 r w x 文件类型 普通文件 d 目录文件 l 软连接文件 R 读
  • RHCE第二次作业

    1 配置ntp时间服务器 确保客户端主机能和服务主机同步时间 2 设置ssh免密登录能够实现客户端主机通过服务端的red hat账号进行基于公钥验证方式的远程连接 root server timedatectl systemctl stop
  • 三层架构介绍

    文章目录 一 什么是三层架构 1 1概述 1 2表示层 1 3业务逻辑层 1 4数据访问层 1 5层与层的关系 二 为什么需要三层架构 三 层架构的应用 3 1原则 3 2例子 实现登录功能 一 什么是三层架构 1 1概述 三层架构 3 t
  • 嵌入式开发——uboot中命令执行函数(main_loop函数)

    1 main loop 函数源码 从uboot中摘抄的部分main loop函数 为了便于理解 函数只保留了主线部分代码 一些用宏定义控制的代码被删除掉了 void main loop void static char lastcomman
  • 单片机电子电路中常用的负压产生电路

    负电压的产生电路图原理 在电子电路中我们常常需要使用负的电压 比如说我们在使用运放的时候常常需要给他建立一个负的电压 下面就简单的以正5V电压到负电压5V为例说一下他的电路 通常我需要使用负电压时一般会选择使用专用的负压产生芯片 但这些芯片
  • 面试准备:操作系统常见面试题汇总

    文章目录 1 为什么要有用户态和内核态 内核态和用户态的运作方式 2 进程间通信方式介绍 3 Linux查看进程状态 cpu状态 占用端口的进程号的命令 linux top命令VIRT RES SHR DATA的含义 4 什么是Swap 5
  • vue父组件数据更新后,子组件页面没刷新

    可以修改子组件绑定的key 这样子组件就会重新渲染