vue + element 组件传值后赋值问题

Question

这是我通过点击列表得到初始数据的方法

rowClick (row) {
          if (row) {
              console.log(row)
          this.rowList = row
          this.slideOutAttr.selectedAssignId = row.assignId
          this.slideOutAttr.visiblity = true
          this.slideOutAttr.size = window.innerWidth * 0.6
          }
      },

然后我去赋值：

 watch: {
        'visible': {
            handler: function (newVal, oldVal) {
                console.log(newVal)
                if (newVal) {
                    console.log(this.rowList)
                    if (this.rowList.customerId && this.rowList.customerId !== '') {
                        getAvailable(this.rowList.customerId).then(res => {
                            this.codeList.availableList = res.data
                            console.log(this.codeList.availableList)
                        })
                            this.goodsList = []
                            if (this.rowList.customerId !== '') {
                                getAvailable(this.rowList.customerId).then(res => {
                                    this.goodsList.push(res.data)
                                    console.log(this.goodsList)
                                })
                            }
                            this.assignInfoList = this.rowList
                            console.log(this.assignInfoList)
                            this.serialNo = this.assignInfoList.orderAssignInnerList.length
                        
                    } else {
                        this.assignInfoList = {
                            orderAssignInnerList: []
                        }
                        this.serialNo = 0
                    }
                    this.currentSelectId = 0

                    this.tempId = 0
                    this.orderAssignInnerList = []
                    this.addNewDetail()
                }
            },
            deep: true
        }
    },

tableRowClassName (row) {
            // 把每一行的索引放进row
            row.row.index = row.rowIndex
        },
        generateId () {
            this.tempId = --this.tempId;
        },
        generateSerialNumber () {
            this.serialNo = ++this.serialNo;
        },
        // 信息-添加行
        addNewDetail () {
            const that = this
            that.generateId();
            that.generateSerialNumber();
            console.log(that.assignInfoList.orderAssignInnerList)
            that.assignInfoList.orderAssignInnerList.push({
                detailId: that.tempId,
                serialNumber: that.serialNo
            })
            console.log(that.tempId)
            console.log(that.serialNo)
            // console.log(that.orderAssignInnerList)
        },

然后就发现数据出现了错误：

表格里面我下拉框选择数据会发现数据填写在下一行 错位了，同时序号的初始化没有生效，不刷新会一直增加

Answer 1

 watch: {
        'visible': {
            handler: function (newVal, oldVal) {
                console.log(newVal)
                if (newVal) {
                    console.log('this.rowList', this.rowList)
                    if (this.rowList.orderAssignInnerList && this.rowList.orderAssignInnerList.length > 0) {
                        this.rowList.orderAssignInnerList.map(item => {
                            item.detailId = this.tempId
                            this.generateId()
                            item.serialNumber = this.serialNo
                            this.generateSerialNumber()
                        })
                        getAvailable(this.rowList.customerId).then(res => {
                            this.codeList.availableList = res.data
                            console.log(this.codeList.availableList)
                        })
                        this.goodsList = []
                        if (this.rowList.customerId !== '') {
                            getAvailable(this.rowList.customerId).then(res => {
                                this.goodsList.push(res.data)
                                console.log(this.goodsList)
                            })
                        }
                        this.assignInfoList = this.rowList
                        console.log(this.assignInfoList)
                        this.serialNo = this.assignInfoList.orderAssignInnerList.length
                        console.log('索引' + this.serialNo)

                    } else {
                        this.assignInfoList = {
                            orderAssignInnerList: []
                        }
                        this.serialNo = 0
                        this.addNewDetail()
                    }
                    this.currentSelectId = 0
                    this.tempId = 0
                    this.orderAssignInnerList = []
                }
            },
            deep: true
        }
    },

Answer 2

没看出来你那里有二次赋值的操作。

不过看你这个数据，比较像整体就没做数据观察。

list 修改的时候可以使用 splice 。对象修改的时候使用 $set