Vue 双重v-for渲染表单，再复制表单编辑之深拷贝

已于 2023-11-14 17:22:54 修改
阅读量383 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript ecmascript
于 2023-07-20 16:21:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaohuihui1400/article/details/131833452
版权
Vue 专栏收录该内容
32 篇文章 6 订阅 ¥19.90 ¥99.00
订阅专栏

文章目录

前言

在做复杂的动态表单，实现业务动态变动，比如有一条需要动态添加的el-form-item中包含了多个输入框，并实现表单验证，但在element-ui组件库中给出的表单校验中没有这样的格式，解决方法可参考文章：Element-UI 实现动态增加多个输入框并校验。

如果不想要固定格式的动态增加表单，且增加表单的类型不同，比如按钮开关、文本输入框、数字输入框，想要自由增加不同类型的表单并验证，可以参考文章：Element-UI 实现动态增加多个不同类型的输入框并校验（双重v-for表单验证）。

如果还想要还要复制多套表单且可编辑，可以参考本文。

问题背景

在复制表单之后，对表单进行修改，发现所有表单的值都同时改变，分析：表单没有进行深拷贝，而是引用的其它表单的值。

实现拷贝表单

表单内容：

在这里插入图片描述

1、第一步坑🤔

在复制表单按钮的方法添加代码

了解本专栏 订阅专栏 解锁全文
一碗情深
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
前端学习（1881）vue之电商管理系统电商系统之双层for循环渲染数据
歌谣的博客
08-07 243
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components/Login.vue' import Home from './components/Home.vue' Vue.use(Router) const router= new Router({ routes:[ {path:'/',redirect:'/login'}...
Vue-条件渲染和循环渲染
qq_64067728的博客
08-31 781
条件渲染一共有两个v-if 和 v-show当设置为false时，他们都会使对应标签在浏览器中消失，true的时候都会出现，而两个条件渲染方法，虽然都是让标签在浏览器中消失，却有所不同。
el table 操作-修改点击弹出表单无法修改，需深拷贝数据
m0_61103773的博客
06-06 164
深拷贝数据
深浅拷贝的实现方式以及适用场景（更新版本）
最新发布
heiioworld_的博客
04-08 404
和是两种不同的复制对象的方式。会创建一个新的对象，并，包括嵌套对象。只会创建一个新的对象，并，而不是值。这意味着对浅拷贝的更改也会影响原始对象。JavaScript。
VUE页面中通过双击实现复制表格中内容的示例代码
10-15
主要介绍了VUE页面中通过双击实现复制表格中内容，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue双重循环渲染数据
hql1024的博客
10-21 1973
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>版本更新历史记录</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4....
vue修改值与深度拷贝
懒人w的博客
06-28 264
深度拷贝与浅度拷贝的区别主要在于有没有为拷贝出的新对象在堆中重新分配一块内存区域。浅度拷贝即直接赋值，拷贝的只是原始对象的引用地址，在堆中仍然共用一块内存。而深度拷贝为新对象在堆中重新分配一块内存，所以对新对象的操作不会影响原始对象。关于为什么要用深度拷贝，如果要将可变对象和不可变对象相互转换，或者需要操作新对象的时候不影响原始对象，则用深度拷贝。copy-on-write原则就是利用深度拷贝来实现的。
VUE中v-model和v-for指令详解
08-30
在 Vue 中，v-model 和 v-for 是两个非常重要的指令，它们分别用于实现数据双向绑定和列表渲染。下面我们将详细介绍这两个指令的使用和实现原理。 v-model 指令 v-model 指令是 Vue 中的一个核心指令，它用于...
Vue表单绑定的实例代码（单选按钮,选择框（单选时,多选时,用 v-for 渲染的动态选项）
01-21
Vue表单绑定（单选按钮，选择框（单选时，多选时）</title> </head> <body> <!-- 单选按钮 --> <input type=radio value=选择1 v-model=radio/> 选择1 <input type=radio ...
利用Vue v-model实现一个自定义的表单组件
08-30
Vue v-model实现自定义表单组件知识点总结 本篇文章主要介绍了利用Vue v-model实现一个自定义的表单组件的相关知识，具有很好的参考价值。下面我们来总结一下相关的知识点： 1. Vue v-model的使用：v-model是Vue...
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
当使用`v-for`与`input`或`select`元素结合时，我们常常需要监听这些表单元素的值变化，以便在值发生变化时执行相应的操作。本文将详细介绍如何在Vue中处理这种情况，并提供相关知识点。 1. **`v-on:input` 事件...
VUE动态渲染，双层for循环
m0_60349254的博客
01-29 590
VUE前端动态渲染，双层for循环
❤ vue 实现复制功能【持续更新中...】
林太白
05-11 384
❤ vue 实现复制功能
vue+element的表格最优实现单条和批量修改、保存、复制、删除、新增、提交数据功能
热门推荐
JCat的博客
04-10 4万+
前言 上一篇写了简单的表格编辑功能 这里整理了一下常见的表格功能。 主要功能 ：批量的新增，复制，删除，修改，保存，和逐条的功能。 针对新手前端小白还挺有用的~ 正文 首先是表格的数据展示 使用的是el-table 绑定数据源 :data="tabledatas",在script的data中挂载tabledatas,在created中发请求赋值，增加属性show来控制input的显隐。 ma...
vue.js多层嵌套列表渲染
银鞍照白马的博客
12-25 5969
简单利用vue实现多层嵌套列表渲染效果图如下 效果图如下 html部分 &lt;ul&gt; &lt;template v-for="(item, index) in wjList"&gt; &lt;li class="voteList-li" v-for="newItem in item" v-on:click="addClassFun(index)"&gt;
vue渲染多层数据用v-for
dreamStart_Lin的博客
04-19 7699
new Vue({ el: '#someElement', data: { category: [ { name: 'cate0', items: [ { value: 'cate0 ite
vue 多级嵌套数组渲染性能优化
chen_dana的博客
05-12 3667
最近遇见一个问题，移动端一个页面展示折叠展示数据，具体要展示多个区域，每个区域下面有不同业务人员，每个业务人员有自己的客户，每个客户又有不同的记录，即这个页面要渲染一个4层的数组。具体页面展示类似为： 1-区域数据 2-区域下属业务员及其客户数据 拿到页面的时候，我想这不简单的么，不就是列表么，四层循环走起。页面先遍历区域进行渲染，然后再遍历区域内的业务员，再遍历业务员的客户，再遍历客户的记录，因为每层展开必须要一个字段进行记录，然后我就把获取的数据按照这四层遍历，每层加个is...
Vue实现在当前表格数据复制后可编辑、保存功能代码
CodingNoob
05-23 6210
最近在用vue做项目的时候遇到一个在当前数据列表里面实现可复制，并且可以编辑然后保存功能，如果是单纯的复制，那很简单，直接往数据里面添加一条数据就可以了。 但是需求是要求复制，并可以编辑保存。自己想了一下，然后写了一些demo. 最终效果如下图所示： 代码如下： &lt;template&gt; &lt;div class="demo"&gt; &lt;div clas...
vue项目 接口中对获取到的数据进行双重for循环导致页面不渲染
xiaoyugan000的博客
05-12 1903
今天跟朋友解决一个vue项目中的问题，大概意思是： 前端向后端发送接口请求，请求成功之后，后端返回了一个数组，数组中包含了上百条数据。而我们需要做得是将这上百条数据以每组20条的形式渲染到页面上。 我和朋友的解决办法是： 定义一个空数组，这个空数组里面的元素也是空数组，然后循环返回的包含了上百条数据的数组，将前20条数据放进第一个为空数组的元素中，然后利用splice将原数组的前20条数据删除，跳出循环。以下为代码： getSell(){ topicList({需要传的数据}).then(
v-for的表单怎么使用computed使用vue实现
04-05
v-for可以用于循环渲染表单，例如下面的代码： ``` <template> <div> <form> <div v-for="(item, index) in formItems" :key="index"> <label :for="item.name">{{ item.label }}</label> <input :type="item.type" :id="item.name" v-model="item.value"> </div> </form> </div> </template> <script> export default { data() { return { formItems: [ { label: '姓名', type: 'text', name: 'name', value: '' }, { label: '年龄', type: 'number', name: 'age', value: '' }, { label: '性别', type: 'radio', name: 'gender', value: 'male', options: ['male', 'female'] }, { label: '爱好', type: 'checkbox', name: 'hobby', value: [], options: ['游泳', '跑步', '健身'] }, ], }; }, computed: { formData() { const data = {}; this.formItems.forEach((item) => { data[item.name] = item.value; }); return data; }, }, }; </script> ``` 上面的代码中，使用v-for循环渲染表单项，通过v-model绑定表单项的值。在computed中定义一个formData属性，将表单项的值组成一个对象返回。这样就可以通过formData来获取表单的数据了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一碗情深

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值