vue3 解决reactive数组对象属性更新问题

2023-11-09

vue3 setup中使用对象数组

const state = reactive<DataProps>({
  fileList:[]
  })

如果更新数组中的对象属性会发现数据不会更新,比如

const newImgFile: ImgFile = {
  path:result,
   status: 'selected',
   file: files[0]
 }
 state.fileList.push(newImgFile)
 newImgFile.path = '123';

解决办法,外面包一层reactive

 const newImgFile: ImgFile = reactive({
   path:result,
    status: 'selected',
    file: files[0]
  })
 state.fileList.push(newImgFile);
 newImgFile.path = '123'; //再修改可以正常更新

或者

 const newImgFile: ImgFile = {
   path:result,
    status: 'selected',
    file: files[0]
  }
 state.fileList.push(newImgFile);
 state.fileList[state.fileList.length-1].path='123'  //再修改可以正常更新
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3 解决reactive数组对象属性更新问题 的相关文章

  • 创建窗口

    工作涉及到了opengl的boom的demo 看到了learn opengl中有 所以 从头学起 顺便记录下 链接https learnopengl cn readthedocs io zh latest 01 20Getting 20st

随机推荐

  • GAN,IGBT, MOSFET

    作者 集微网 校对 团团 集微网 爱集微APP 各大主流应用商店均可下载 集微网消息 功率半导体是电子电力装置电能转换与电路控制的核心器件 根据Yole数据 中国已经成为全球最大的功率半导体消费市场 预计至2021年 全球功率器件市场规模将
  • Substance designer 瓦片贴图制作

    瓦片贴图制作 因为最终在unity应用 所以采用BaseColor Metallic Roughness Normal Height贴图的工作流程 对于瓦片的细节上 可以分为 基色 上下两种 污渍 水渍 苔藓 裂痕 如果你研究Substan
  • 使用ffmpeg获取一帧摄像头数据

    最近在研究FFmpeg 比较惊讶的是网上一大堆资料都是在说如何从已有的视频中截取一帧图像 却很少说到如何直接从摄像头中捕获一帧图像 其实我一直有个疑问 就是在Linux下 大家是用什么库来采集摄像头的 opencv 还是自己写v4l2的代码
  • HDOJ1052

    先用最快马比 不行再用最慢马比 都不行 就送最慢马给忘得最快马 include
  • git提交本地仓库至远端

    文章目录 1 创建完项目结构 没有分支 2 在github上新建远程仓库 3 按照上图中红色框中的命令 就可以提交本地 4 提交过程中可能会遇到全局配置文件config 中没有配置用户和邮箱地址的情况 5 git pull push每次都需
  • CSS布局—— float布局和flex布局

    用什么CSS布局 当需要兼容IE9时 使用float布局 当需要兼容IE9且不需要兼容最新浏览器时 使用flex布局 当不需要兼容IE9 需要兼容最新浏览器时 使用grid布局 float布局 父元素 添加clearfix类 清楚浮动bug
  • c++生成uuid

    不引用uuid h生成uuid方式 转自How can I generate UUID in c without using boost library Stack Overflow include
  • vue 时间插件_基于 Vue+Gantt 构建甘特图组件

    昨天给大家推荐了一款H5甘特图插件dhtmlxGantt 今天给大家分享如何在Vue项目中实现甘特图插件 基于dhtmlx gantt插件来实现在vue js项目中创建甘特图 安装依赖 首先需要安装 dhtmlx gantt 模块 npm
  • 对于任何一颗二叉树,若其终端节点数为n0,度为2的结点数为n2,则n0=n2+1

    对于任何一颗二叉树 若其终端节点数为n0 度为2的结点数为n2 则n0 n2 1 设度为0的结点数为n0 度为1的结点数为n1 度为2的结点数为n2 边数为T 第一种方案 由一个节点开始构建二叉树 观察图片 初始状态为n0 1 n1 0 n
  • python数据持久存储:pickle模块的基本使用

    经常遇到在Python程序运行中得到了一些字符串 列表 字典等数据 想要长久的保存下来 方便以后使用 而不是简单的放入内存中关机断电就丢失数据 这个时候Pickle模块就派上用场了 它可以将对象转换为一种可以传输或存储的格式 python的
  • Android入门(一)AndroidStudio下的APP目录结构介绍

    Project Name 工程项目名称 Application Name 当前应用发布以后的名字 例如QQ图标下面的名字是 QQ 就是Application Name Android Studio工程目录 1 gradle和 idea 这两
  • 使用EasyExcel添加Excel数据

    一 导入excel代码 1 pom文件
  • laravel经验分享(2)

    标题laravel经验分享 2 通过一个简单的get请求让新手们了解控制器 模型 数据表 api路由之间的关系 1 控制器创建 php artisan make controller Api newscontroller 创建成功之后 Co
  • 基于Linux安装Docker

    Docker官网 Docker Docs How to build share and run applications Docker Documentation 学习任何技术 一定要参考相应的官网学习 一定要参考官网学习 目录 一 环境准
  • 现场嵌入式设备中的EC20模块如何通过互联网将TCP报文传输到阿里云服务器

    情况说明 现场有几台嵌入式设备 每台设备上有一块EC20模块做为TCP客户端 希望将现场采集的传感器数据通过互联网传输到阿里云服务器 阿里云服务器上面运行一个用C 语言编写的服务器程序 就可以接收现场设备采集的传感器数据 一 阿里云服务器公
  • VC编程实现文本语音转换

    VC编程实现文本语音转换 文本语音 Text to Speech 以下简称TTS 它的作用就是把通过TTS引擎把文本转化为语音输出 本文不是讲述如何建立自己的TTS引擎 而是简单介绍如何运用Microsoft Speech SDK 建立自己
  • dynamo方程怎么写_【简明自控】为什么特征方程如此重要

    简明自动控制 为什么特征方程如此重要 热场视频 自平衡杆 双轴反作用轮倒立摆 哔哩哔哩 干杯 bilibili www bilibili com 顶个棍子 具有主动脚轮的全向移动机器人 哔哩哔哩 干杯 bilibili www bilibi
  • 二叉树的创建、前中后序遍历(递归和非递归)C语言实现

    直接上代码 include
  • LA@方阵相似@相似矩阵的性质@正交相似对角化

    文章目录 方阵相似 引言 相似矩阵定义 相似变换 相似变换矩阵 相似矩阵的矩阵多项式和特征值相同 推论 与对角阵相似的矩阵性质定理 相似矩阵性质 导出性质 相似矩阵的乘方性质 相似矩阵和矩阵多项式 相似对角阵 对角阵多项式的展开 小结 强矩
  • vue3 解决reactive数组对象属性更新问题

    vue3 setup中使用对象数组 const state reactive