首页 > 其他分享 >vue3响应式数据重复

vue3响应式数据重复

时间:2023-08-29 12:00:10浏览次数:40  
标签:... const 重复 响应 添加 数组 vue3

记一次bug。。

由于【甲方负责人】的表单是响应式的,然后直接添加到另一个响应式的数组里了,就会造成【更改表单内容,也会使数组里的值发生变化】

解决方法

1 //添加到列表,做临时显示
2 const addresponsible = () => {
3   const newResform = { ...resform }; // 添加数组之前 创建 resform 的拷贝
4   resList.push(newResform); //添加拷贝后的对象
5 };

这样就可以了。

ps: 三个点(...)的用法参考:es6 扩展运算符 三个点(...)_暮志未晚Webgl的博客-CSDN博客

 

标签:...,const,重复,响应,添加,数组,vue3
From: https://www.cnblogs.com/ff2223/p/17664398.html

相关文章

  • 【Vue】vue3 v-draggable 拖拽指令封装
    说明需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为father,则拖拽的时候以父元素为拖拽对象思路:1、设置需要拖拽的元素为absolute,其父元素为relative。2、鼠标按下(onmousedown)时记录目标元素当前的left和top值。3、鼠标移动(onmousemove)时计算每......
  • 【Vue】vue3 中 如何将el-table的表格数据下载为.xlsx格式文件
    安装依赖首先,你需要安装xlsx和file-saver这两个库。npminstallxlsxfile-saver--save有兴趣可以看看两个库的官方说明,直接看下面使用也没问题。xlsx官方介绍TheSheetJSCommunityEditionoffersbattle-testedopen-sourcesolutionsforextractingusefuldata......
  • Vue3 Refs模板
    Refs模板用来获取页面DOM元素或者组件,类似于Vue2.X中的$refs。Refs模板的使用方法如下。(1)在setup()中创建ref对象,其值为null。(2)为元素添加ref属性,其值为步骤(1)中创建的ref对象名。(3)完成页面渲染之后,获取DOM元素或者组件。 src\views\HomeView.vue<template><d......
  • 百亿数据查询秒级响应,观测体系之日志中心该如何玩转?
    日志是处理生产故障、性能优化、业务分析的重要参考依据,是系统稳定运行不可或缺的一部分。随着业务系统规模急剧膨胀增大,尤其是是微服务架构逐渐普及,一个系统可能涉及多个应用模块与服务实例,传统模式下运维人员去定位问题显得异常困难,效率低下。当服务器资源增加时,各种类型的系统日......
  • Vue3 依赖注入 provide() inject()
    依赖注入就是父组件向后代组件传递数据,可以向子组件传递数据,也可以向孙子组件传递数据。在父组件中使用provide()函数,向后代传递数据。在后代组件中使用inject()函数,获取传递过来的数据。 provide()​提供一个值,可以被后代组件注入。inject()​注入一个由祖先组件或整个应......
  • DEDEBIZ禁止发布重复标题文章的方法
    修改文件位置/admin/article_add.php找到if(empty($click))$click=($cfg_arc_click=='-1'?mt_rand(1000,6000):$cfg_arc_click);在此段代码下面添加//检测文档是否重复if($cfg_mb_cktitle=='Y'){$row=$dsql->GetOne("SELECT*FROM`#@__a......
  • Vue3 watch() 监听
    watch()​侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数 <template> <span> <p>{{num}}</p> <p>{{num2}}</p> <button@click="num++">+1</button> <button@click="addNum">+1</button> &......
  • vue3 setup访问子组件的 DOM 元素
    使用setup的情况下这个时候我们无法使用this,注意在setup中setup是封闭的,不会将子组件事件暴露出来,所以要用defineExpose(),将需要在父组件调用的函数暴露出去,子组件代码如下:<template><divref="domRef"><div>哈哈哈哈</div></div></template><scriptsetuplang="t......
  • Vue3 computed() 计算属性
      <template> <span> <p>普通属性:{{num}}</p> <p>计算属性-只读:{{numAdd}}</p> <p>计算属性-可读写:{{numAdd2}}</p> <button@click="numUpdate">修改普通属性</button> <button@click="numAddUpda......
  • vue3 + vite 动态引入不被打包的静态资源
    在开发中,通常会把一些静态资源放在assets文件夹下,但是assets目录下的内容是需要vite编译打包的,所以如果只是引用assets目录下的资源时,使用绝对路径、相对路径均可。但是,在开发中,我们经常会引用一些不被打包的资源,此时该资源是放在public目录下的,那么在引用时,路径的写法如下:不......