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

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

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

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

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

 Object.assign(addData.addFormData, scope)

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

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值