Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

124
Vistas
Variable de datos no definida Vue.js cuando se usa axios

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)

ingrese la descripción de la imagen aquí

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á:

ingrese la descripción de la imagen aquí

almost 4 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

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)
}
almost 4 years ago · Santiago Trujillo Denunciar

0

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)
}
almost 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda