关于inpu框绑定数据push到新数组,值重复的问题
最近写了一个需求,需要自定义输入题目跟选项,push到新数组,然后循环渲染出来,push之后发现,每项的值是重复的
## 解决方法
是因为双向绑定的input,push之后在内存中的位置是一样的,导致了值也是一样的,在push前,深克隆一个对象就可以了,因为深克隆会在内存中重新生成一个内存地址保存数据,代码如下在utils文件夹中写一个js文件,然后写一个深克隆方法,代码如下
// 定义一个深拷贝函数 接收目标target参数
export function deepClone(target) {
// 定义一个变量
let result
// 如果当前需要深拷贝的是一个对象的话
if (typeof target === 'object') {
// 如果是一个数组的话
if (Array.isArray(target)) {
result = [] // 将result赋值为一个数组,并且执行遍历
for (const i in target) {
// 递归克隆数组中的每一项
result.push(deepClone(target[i]))
}
// 判断如果当前的值是null的话;直接赋值为null
} else if (target === null) {
result = null
// 判断如果当前的值是一个RegExp对象的话,直接赋值
} else if (target.constructor === RegExp) {
result = target
} else {
// 否则是普通对象,直接for in循环,递归赋值对象的所有值
result = {}
for (const i in target) {
result[i] = deepClone(target[i])
}
}
// 如果不是对象的话,就是基本数据类型,那么直接赋值
} else {
result = target
}
// 返回最终结果
return result
}
然后在main.js中 import { deepClone } from “@/utils/index”;导入,因为我是在index文件内写的方法,所以是这样导入的,
使用方法
直接调用这个方法,把需要被克隆的值传入就可以啦,效果如下:
这样数据就不会重复啦,完美解决
因为我也是小白,第一次写文章记录开发过程中遇到的问题,若是有大佬觉得有不妥的地方,可以指点