v-for中遍历多个el-select时，下拉选择框同步？

Question

出现问题如下：

代码如下：

let newSkuArr = []
                    res.data.forEach((item,index) => {
                        item['checkedList'] = []
                        item['checkSelect'] = []
                        newSkuArr.push(item)
                    });
                    this.skuList = newSkuArr
                    let newArr = []
                    fileList.forEach(($item)=>{
                        let { data } = $item.response
                        data.goods = this.skuList
                        newArr.push(data)
                    })
                    console.log('newArr：',newArr)
                    this.tableData = newArr

<el-row v-for="(item,index) in row.goods" :key="index" class="expand">
                                <el-col class="mgbottom20" :span="11">
                                    <el-checkbox-group v-model="item[item.checkedList]" v-if="type == 'upload'">
                                        <el-checkbox class="check-item">
                                            <span class="goodname">[{{ item.goodsCode }}][{{ item.goodsBarCode }}]{{item.skuName}}</span>
                                        </el-checkbox>
                                    </el-checkbox-group>
                                    <div v-else>[{{ item.goodsCode }}][{{ item.goodsBarCode }}]{{item.skuName}}</div>
                                </el-col>
                                <el-col class="mgbottom20 expand-col2" :span="10">
                                    <el-select v-model="item[item.checkSelect]" @change="onChange($event,$index)" filterable clearable multiple placeholder="请选择" class="offgrade" v-if="type == 'upload'">
                                        <el-option
                                            v-for="item in unqualifiedList"
                                            :key="item.itemId"
                                            :label="item.itemDetail"
                                            :value="item.itemId"
                                        >
                                        </el-option>
                                    </el-select>
                                    <div v-else>测试时间的;就是的机会建设大街后;视镜电话结合实际的环境</div>
                                </el-col>
                            </el-row>

请教各路大神该怎么修改才会正确显示而不会同步呢？

Answer 1

定义变量的时候最好用let 或者var 常量再用const 声明就不能更改
skuList data都是对象 不是基本类型 是引用类型 应该是浅拷贝导致的
data.goods=JSON.parse(JSON.stringify(this.skuList)) 赋值的时候深拷贝一下
当然你也可以自己定义深拷贝的方法 毕竟JSON方法有缺点

Answer 2

fileList.forEach(($item)=>{
    let { data } = $item.response
    data.goods = this.skuList
     newArr.push(data)
})

data.goods 指向了同一个数组对象，意味着你的模板绑定的数据是同一个字段