如何在 axios 获得的对象数组中搜索 id？ Vue 2

Question

I am trying to verify if the user is inside that list that I capture by axios, the issue is that I have used the FILTER option but it always returns undefined or [], being that if the user exists in that array.

I can't think what else to do, because I validate if it is by console.log() the variable with which I ask and if it brings data.

    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)
        },

Console

Vue data

Answer 1

getSalesman is an async method. At the time of the filter, the array being filtered is still empty.

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

Have the methods run sequentially by awaiting the async method:

await this.getSalesman()
this.getStagesAmountByUser()

Answer 2

The method getSalesman is asynchronous. Meaning that "getStagesAmountByUser" will start executing before "getSalesman" finishes.

2 ways to fix the problem:

1. await the "getSalesman" method, but you have to make the created method async as well. Making the code as follows:

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

2. Attach a.then to the getSalesman function, and start the next one inside the.then. Making the code as follows:

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

Answer 3

You can avoid the inefficient clientside filtering if you pass the id to the backend and only select by that id.

Additionally, created only gets called once unless you destroy the component which is also inefficient, so watch when user.id changes then call your method again.

Plus don't forget you must wrap any async code in a try/catch else you will get uncaught errors when a user/salesman is not found etc, you can replace console.error then with something which tells the user the 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) } } } }