vue3列表编辑的时候，列表数据会跟着编辑内容同步改变问题

最新推荐文章于 2024-04-28 15:43:37 发布
最新推荐文章于 2024-04-28 15:43:37 发布
阅读量340 收藏
点赞数 1
文章标签： json vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53910290/article/details/137041089
版权

1.最近在写vue3项目的时候发现一个问题，我编辑列表数据的时候，列表上数据也会跟着改变。就算我数据不提交也会出现。百度了一圈说是vue3双向数据绑定的弊端。

然后他就跟着改变，你就算点击取消按钮之后，列表上还是修改后的数据，必须刷新页面才能改回去。

最后有两种说法：一种是浅拷贝，他就不会出现此问题。

                            一种是转字符串在转对象的形式，其实也是浅拷贝。

 Object.assign(addData.addFormData, scope)

 addData.addFormData = JSON.parse(JSON.stringify(scope));

两种方法都可以的，就不会出现同步的问题了

看见代码就要慌
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue列表数据发生变化指令没有更新问题及解决方法
10-15
Vue的响应式系统和VDOM机制旨在自动处理数据变化和视图更新，但在某些情况下，如上述列表更新问题，需要我们正确地设置`:key`属性来确保视图的正确同步。使用唯一ID或在指令中动态设置`key`都是有效的解决策略。在...
Vue如何获取数据列表展示
10-15
在Vue.js中，获取并展示数据列表是一项基本操作，它涉及到数据绑定、组件化、以及异步数据处理等核心概念。下面将详细讲解如何在Vue中实现数据列表的获取与展示，以本例中从GitHub API获取Vue.js提交数据为例。 1. ...
vue element在对表格内容修改时，表格数据实时跟随表单数据变化，关掉编辑表单后也不会恢复
weixin_45311473的博客
08-15 882
在对编辑表单赋值时要注意浅拷贝和深拷贝的问题，不然就会导致如标题所述问题。使用如下代码的形式即可解决问题。
vue编辑弹窗，列表数据也会跟着变
weixin_49203377的博客
07-07 2098
背景：点击列表某一项编辑，打开编辑弹窗，列表数据传递给弹窗组件，编辑该项内容，弹窗编辑的时候后面列表的数据也会跟着变 原因：当列表项传递数据给弹窗时，传递的是对象是一个复杂的数据类型，复杂数据直接赋值是赋值的引用，b=a相当于 b和a指向了统一内存，改变a,b也跟着变了，所以要多开辟一个内存，只是两个内存里的值一样 this.a={…this.b} 方式一原理：把复杂类型先转成字符串 字符串复制没有引用问题 然后再转过来（深度克隆，把值复制过去 不复制引用，相当于拷贝一份一样的值 但是值没联系） 方式
vue弹窗上修改数据后页面数据跟着更改的解决方法
最新发布
qq_32106541的博客
04-28 255
Object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，它将返回目标对象。不会引用原地址，不会修改到原来的内容。如果是数组，或者里面某一项是数组，先用JSON.stringify(data)转换成字符串，再用JSON.parse(data)转换回来就不会引用源地址了。这样如果操作失误，取消或关掉编辑对话框，数据不会被修改，只有在提交的时候才会修改页面数据。修改表格里的数据，在弹窗里修改数据，未提交表格里数据就修改了，取消弹窗数据也已经修改。
Vue3+ts使用pinia传递数据,修改数据
wtd183833501176的博客
09-20 1643
毫无关系的组件之间的传值,使用pinia,实时修改pinia中想要传递的值
vue3.0 子组件修改父组件传递过来的值
Start的小笔记
01-17 1万+
vue 的子组件 不是 不能直接更改父组件的值，需要将props 的值 给到子组件，后再修改， 否则：Unexpected mutation of “props” prop. vue3提供了一个解决：toRefs：https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开 使用 const { foo, bar } = reactive({ foo: 1, b.
vue 表单数据修改，导致页面列表数据被同步修改问题的解决。
qq_40055200的博客
01-18 3360
在vue的项目开发中，有时候在表单提交的时候，尤其是页面中对话层编辑数据，在修改的时候，会看到列表页面的数据也在跟着改变，这是vue 的双向数据绑定的弊端，实时更新数据，因为是一个数据源，因为在修改对象的时候，对象的指针直接指向页面数据 了，解决办法是： 在修改的时候，会获取到当前行的对象数据，那么我们不是直接赋值给我们的页面对象数据，而是： this.addRoleFrom =JSON.parse(JSON.stringify(row)) // 改过之后的 this.addRoleFrom =Oje
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
08-29
本实例中，我们探讨的是一个名为“tabal列表编辑单元格”的组件，它允许用户在表格的单元格中进行编辑操作。下面将详细介绍这个组件的实现细节以及Vue组件的基本概念。 首先，组件的模板部分（`<template>`）定义了...
一款纯VUE3 开发的富文本编辑器 editor
10-18
这款vue 编辑是由vue3 开发的，不存在第三方引用，拿来即可用不用添加任何外部图片js,组件，且二次开发也方便 版本为vue-property-decorator
Vue3中修改父组件传递到子组件中的值(全网少有)
Yan9_9的博客
12-16 8082
/此处是父组件中引入的子组件 < ChildrenView v - model : num = "num" / > //定义数据 let num = ref(10);//定义num为10,传递给子组件< script setup > //子组件接收父组件传递过来的数据 let props = defineProps({});
Vue ElementUI 在表单中修改数据，表格的数据也跟着修改的问题
潇雷的博客
12-20 2786
在编辑表单的时候，修改表格的数据，不管确定还是取消，表格的数据也被修改了，这是因为我们回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但会误导观众，这时候用下面的回显方式，用过 JSON 进行深拷贝即可。 editShow(row){ this.$data.contract=JSON.parse(JSON.stringify(row)) this.$data.form.fileName=row.fileName this.$data.draw.
Vue3中组件数据的传递以及更改
ct5211314的博客
09-02 3530
Vue3中组件数据的传递以及更改，包括：父子组件之间的数据传递以及数据更改，子孙组件的数据传递以及更改。
vue.js输入框输入值内容实时跟着变化
Code_Pupil的博客
03-24 1万+
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
SpringBoot结合Vue.js+axios框架实现增删改查功能+网页端实时显示数据库数据（包括删除多条数据）
RuanFun的博客
09-20 3552
SpringBoot结合Vue+axios框架实现增删改查功能（包括删除多条数据）+网页端实时显示数据库数据（剖析难点：实时更新，数据回显，获取选中行数据，选中多行数据，模糊查询语句）【全网最全】
在vue3+ts项目里使用query和params传参
一步一个脚印，踏实努力，向着目标前进
08-21 968
对于`params`参数，我们可以使用`route.params.routeParam`来获取传递的参数。在组件中，我们使用`props`选项来定义`routeParam`属性，并指定它的类型为`String`，并将其设置为必需的
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题
weixin_42564420的博客
02-25 2284
vue + element ui 中点击表单编辑，未发起请求，表格数据也跟着改变的问题 问题描述：点击编辑表格某一条数据时，此时并未发起请求修改数据，但是表格的数据也会随着改变 分析原因：在表单编辑当前数据时，还没有点击确定或者取消，此时表格的数据已经改变，而奇怪的是浏览器并未发起请求修改数据，原来是回显数据的时候直接修改了目标的数据。这是浅拷贝，引用地址还是用的真实数据，虽然没有保存到数据库中，但是误以为已经修改修改了数据，所以用 JSON 进行深拷贝即可。 解决办法： edit(row){ //JSON
Vue3 初探 ref、reactive 、及改变数组的值
热门推荐
u014212540的博客
04-19 2万+
概况 Vue3 里要实现数据的响应式监听一共有两种方式既：ref 和 reactive 他们既有区别又有联系。 ref() ref数据响应式监听。ref 函数传入一个值作为参数，一般传入基本数据类型，返回一个基于该值的响应式Ref对象，该对象中的值一旦被改变和访问，都会被跟踪到，就像我们改写后的示例代码一样，通过修改 count.value 的值，可以触发模板的重新渲染，显示最新的值 reactive() reactive reactive 是 Vue3 中提供的实现响应式数据的⽅法。 在 Vue2 中响应
vue3 列表数据过滤
05-27
在 Vue3 中，可以使用计算属性或者方法来进行列表数据的过滤。 1. 计算属性过滤： 在组件中定义一个计算属性，该属性返回过滤后的数据列表。可以使用 JavaScript 中的 filter() 方法对数据进行过滤。 例如： ``` <template> <ul> <li v-for="item in filteredList">{{ item }}</li> </ul> </template> <script> import { ref, computed } from 'vue' export default { setup() { const list = ref(['apple', 'banana', 'orange']) const filterKey = ref('') const filteredList = computed(() => { return list.value.filter(item => { return item.includes(filterKey.value) }) }) return { filteredList } } } </script> ``` 2. 方法过滤： 定义一个方法，该方法接收列表数据和过滤关键字作为参数，返回过滤后的数据列表。 例如： ``` <template> <ul> <li v-for="item in getFilteredList(list, filterKey)">{{ item }}</li> </ul> </template> <script> import { ref } from 'vue' export default { setup() { const list = ref(['apple', 'banana', 'orange']) const filterKey = ref('') const getFilteredList = (list, filterKey) => { return list.filter(item => { return item.includes(filterKey) }) } return { list, filterKey, getFilteredList } } } </script> ``` 以上两种方法都可以实现列表数据的过滤。具体使用哪种方法，可以根据实际情况选择。值得注意的是，在 Vue3 中使用计算属性时，需要使用 `computed` 函数来创建计算属性。而在 Vue3 中，使用方法时，需要在 `setup` 函数中定义方法，并将其作为组件实例的属性返回。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值