0
216
Vistas¿Cómo buscar una identificación en una matriz de objetos obtenidos por axios? vista 2
Estoy tratando de verificar si el usuario está dentro de esa lista que capturo por axios, el problema es que he usado la opción FILTER pero siempre devuelve indefinido o [], siendo que si el usuario existe en ese arreglo.
No se me ocurre que mas hacer, porque valido si es por console.log() la variable con la que pido y si trae datos.
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) },Consola
datos de vue
3 Respuestas
Responde la pregunta0
El método getSalesman es asíncrono, lo que significa que getStagesAmountByUser comenzará a ejecutarse antes de que finalice getSalesman .
Dos formas de solucionar el problema:
- Espere el método
getSalesman, pero también debeasyncel métodocreated. Cambie el código de la siguiente manera:
async created() { this.getStagesDefault() await this.getSalesman() this.getStagesAmountByUser() }
- Adjunte un
.thena la funcióngetSalesmany comience el siguiente dentro del.then. Cambie el código de la siguiente manera:
created() { this.getStagesDefault() this.getSalesman().then(() => this.getStagesAmountByUser()) }
0
getSalesman es un método asíncrono. En el momento del filtro, la matriz que se está filtrando todavía está vacía.
this.getSalesman() // this runs later this.getStagesAmountByUser() // this runs right awayHaga que los métodos se ejecuten secuencialmente esperando el método asíncrono:
await this.getSalesman() this.getStagesAmountByUser()0
Puede evitar el filtrado ineficiente del lado del cliente si pasa la identificación al backend y solo selecciona por esa identificación.
Además, created solo se llama una vez a menos que destruyas el componente, que también es ineficiente, así que observa cuando cambia user.id y luego vuelve a llamar a tu método.
Además, no olvide que debe envolver cualquier código asíncrono en una prueba/captura; de lo contrario, obtendrá errores no detectados cuando no se encuentre un usuario/vendedor, etc., puede reemplazar console.error luego con algo que le diga al usuario el 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) } } } }