methods方法.then之后return内容undefined

Question

需求描述

我有一个查看座位信息的功能，根据日期呈现不同的座位状态
shopInfo里面有座位的初始信息但没有座位情况，只有在featchSeatList里面才有已经被订座为座位信息，现在我想切换日期呈现座位信息，但是放在data里面没一起变化，只有点了座位才变化

题目描述

我在computed调用methods中的一个方法getSeat，getSeat会发起请求带回数据，我将其组装后重新return,但是我连请求带回数据都不能return

data数据结构

            shop:{
                URL:'',
                img:'',
                ……
                seat:[{id:xx,title：xx},{id:xx,title：xx}……]
                //后触发了featchSeatList每个对象内都会增加一个额外的变量disabled
                //变成{id:xx,title：xx,disabled:0},{id:xx,title：xx,disabled:1}
            },

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

    computed: {
        newSeat() {
            console.log('返回')
            console.log(this.getSeat())
            return this.getSeat()
        }
    },

methods中：

        getSeat(res) {
            this.seatQuery.date = this.date,
            this.seatQuery.shop_id = this.sid,
            this.seatQuery.point = this.chooseTime
            featchSeatList(this.seatQuery).then(res => {
                let _this = this
                // 检查已经预定的餐桌
                if(res.length!=0 && _this.shop){
                    _this.shop.seat.forEach(seat =>{
                        seat.disabled = 0
                        res.forEach(poi =>{
                            if(!_this.seatQuery.noon_after || poi.noon_after == _this.seatQuery.noon_after){
                                if(poi.seat_id == seat.id ) {
                                    seat.disabled = 1
                                }
                            }
                        })
                    })
                    console.log('座位情况')
                    console.log(_this.shop.seat)
                    this.$set(_this.shop,'seat',_this.shop.seat)
                } else {
                    _this.shop.seat.forEach(seat =>{
                        seat.disabled = 0
                    })
                    console.log(_this.shop.seat)
                    this.$set(_this.shop,'seat',_this.shop.seat)
                }
            })
        },

你期待的结果是什么？实际看到的错误信息又是什么？

目前是undefined，我想正常显示这个数组……

Answer 1

因为请求是异步的啊，而且也不应该用computed接受

Answer 2

我是楼主
对于每一个数组对象都去更新不要用push或者直接赋值，用splice，数组在vue里称变异方法，上面的方法改为

getSeat(res) {
                this.seatQuery.date = this.date,
                this.seatQuery.shop_id = this.sid,
                this.seatQuery.point = this.chooseTime
                featchSeatList(this.seatQuery).then(res => {
                    let _this = this
                    // 检查已经预定的餐桌
                    if(res.length!=0 && _this.shop){
                        _this.shop.seat.forEach((seat,index) =>{
                            // seat.splice(index,1,seat)
                            seat.disabled = 0
                            res.forEach(poi =>{
                                if(!_this.seatQuery.noon_after || poi.noon_after == _this.seatQuery.noon_after){
                                    if(poi.seat_id == seat.id ) {
                                        seat.disabled = 1
                                        //更新每一个对象
                                        _this.shop.seat.splice(index,1,seat)
                                    }
                                }
                            })
                        })
                        // _this.$set(_this.shop,'seat',_this.shop.seat)
                    } else {
                        _this.shop.seat.forEach((seat,index) =>{
                            seat.disabled = 0
                            _this.shop.seat.splice(index,1,seat)
                        })
                        // _this.$set(_this.shop,'seat',_this.shop.seat)
                    }
                })
            },