关于input框v-model绑定的数据push到新数组,值重复的问题

关于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文件内写的方法,所以是这样导入的,

使用方法

直接调用这个方法,把需要被克隆的值传入就可以啦,效果如下:
这样数据就不会重复啦,完美解决
因为我也是小白,第一次写文章记录开发过程中遇到的问题,若是有大佬觉得有不妥的地方,可以指点