如何在 axios 獲得的對象數組中搜索 id？ Vue 2

Question

我正在嘗試驗證用戶是否在我通過 axios 捕獲的列表中，問題是我使用了 FILTER 選項，但它總是返回未定義或 []，即如果用戶存在於該數組中。

我想不出還能做什么，因為我通過 console.log() 驗證它是否是我詢問的變量以及它是否帶來數據。

    created() {
        this.getStagesDefault()
        this.getSalesman()
        this.getStagesAmountByUser()
    },
    methods: {
        async getSalesman(){
            const { data } = await axios.get('salesman')
            this.employees = data.data
        },
        getStagesAmountByUser(){
            console.log(this.user['id'])
            var objectUser = this.employees.filter(elem => {
                return elem.id === this.user['id']
            })

            console.log(objectUser)
        },

安慰

數據

Answer 1

getSalesman是一個異步方法。 在過濾時，被過濾的數組仍然是空的。

this.getSalesman()            // this runs later
this.getStagesAmountByUser()  // this runs right away

通過等待異步方法讓方法按順序運行：

await this.getSalesman()
this.getStagesAmountByUser()

Answer 2

getSalesman 方法是異步的。 這意味着“getStagesAmountByUser”將在“getSalesman”完成之前開始執行。

解決問題的2種方法：

1. 等待“getSalesman”方法，但您還必須使創建的方法異步。 制作代碼如下：

 created: async() =>{ this.getStagesDefault() this.getSalesman() this.getStagesAmountByUser() }

2. 將a.then附加到getSalesman function，然后在.then中啟動下一個。 制作代碼如下：

 created(){ this.getStagesDefault() this.getSalesman().then( () => this.getStagesAmountByUser()) }

Answer 3

如果您將 id 傳遞給后端並且僅通過該 id 傳遞 select，則可以避免低效的客戶端過濾。

此外，除非您銷毀同樣低效的組件，否則 created 只會被調用一次，因此請注意user.id何時更改然后再次調用您的方法。

另外不要忘記您必須將任何異步代碼包裝在 try/catch 中，否則當找不到用戶/推銷員等時您將收到未捕獲的錯誤等，您可以將 console.error 替換為告訴用戶錯誤的內容。

 { data: () => ({ employee: {} }), watch: { 'user.id' (v) { if (v) this.getEmployee() } }, created() { this.getEmployee() }, methods: { getEmployee() { if (typeof this.user.id === 'undefined') { return } try { const { data } = await axios.get(`salesman/${this.user.id}`) this.employee = data.data } catch (e) { console.error(e) } } } }