vue的v-for中循环修改变量（this.xxx）的给子组件传值覆盖重复的问题

遇到问题

使用v-for，其中需要根据不同的item修改某个变量(this.xxx)，然后向子组件中传值，但是发现传到子组件中的值却全是重复一样的：

我们循环qsList，其中是我自定义的一个组件，想向该子组件中传值

<el-tab-pane v-for="(item, index) in qsList" :key="index" :name="String(index+1)" :label="item.name">
  <qs-form :qs-config="setQsConfig(item.key)"/>
 </div>
</el-tab-pane>

data() {
  return { 
    qsConfig: {
      qsKey: '',
      preview: false,
      showBtns: true,
    },
  }
}
 
...
...
methods: {
  setQseConfig(key){
    // console.log(">>>",key)
    // 问题就出在这里
    this.qsConfig.qsKey=key
    return this.qsConfig
  },
}

猜想一下：
vue的v-for是最后统一调用给子组件传值，而不是每次执行就调用传值一次！所以变量会在被传值到子组件之前，会被一直修改 list.length 次。而底层逻辑应该是就是“浅拷贝”变量，即引用地址都是指向那同一个地址。

所以我们修改为“深拷贝”，让循环中每次都是新的局部变量，互相不影响！

解决办法

修改为如下“深拷贝”代码即可：

setQsConfig(key){
  // console.log(">>>", key)
  // 深拷贝，避免使用同一个变量，导致循环修改同一变量的值覆盖问题
  let qc = {...this.qsConfig}
  qc.qsKey = key
  return qc
}