Esto me está volviendo loco.
Estoy asignando el valor de una respuesta de axios a mis datos de vue de esta manera:
mounted() {
axios
.get('/campaigns/new.json')
.then(response => (
this.kits = response.data[0].kits,
)
)
Puedo ver con las herramientas de desarrollo de vue que mi this.kits tiene una matriz de 8 elementos (correcto)
Cuando trato de usar this.kits después o hago console.log(this.kits) , obtengo una matriz indefinida o vacía .
¿Qué diablos me estoy perdiendo? Por favor ayuda. Gracias
mounted() {
axios
.get('/campaigns/new.json')
.then(response => (
this.kits = response.data[0].kits,
this.kitProducts = response.data[0].kitproducts,
this.products = response.data[0].products,
this.boxes = response.data[0].boxes,
this.categories = response.data[0].categories,
this.extras = response.data[0].extras,
this.isCurrentUser = response.data[0].user,
this.giftpacks = response.data[0].giftpacks
)
)
console.log(this.kits)
console.log(this.kits) generará:
su console.log se está ejecutando justo después de que se inicia la solicitud de promesa, tendría que colocarlo al final dentro del bloque then o, como dice Nicola, usar async await
prueba esto:
async mounted() {
const response = await axios.get('/campaigns/new.json')
this.kits = response.data[0].kits
this.kitProducts = response.data[0].kitproducts
this.products = response.data[0].products
this.boxes = response.data[0].boxes
this.categories = response.data[0].categories
this.extras = response.data[0].extras
this.isCurrentUser = response.data[0].user
this.giftpacks = response.data[0].giftpacks
console.log(this.kits)
}
Intenta esperar tus datos. Mueva la llamada API al método:
methods: {
async getData() {
const res = await axios.get('/campaigns/new.json')
this.kits = res.data[0].kits,
}
}
y luego en gancho montado:
async mounted() {
await this.getData()
console.log(this.kits)
}