Undefined data variable Vue.js when using axios

Question

this is driving me nuts.

I'm assigning the value from an axios response to my vue data like this:

mounted() {
  axios
  .get('/campaigns/new.json')
    .then(response => (
      this.kits = response.data[0].kits,
     )
  )

I can see with vue developer tools that my this.kits has an array of 8 items (correct)

When I try to use this.kits afterwards or do console.log(this.kits), I get undefined or empty array.

What the hell am I missing? Please help. Thank you

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) will output:

where are you doing console.log ?

Yanjan. Kaf.
– Yanjan. Kaf.

2022-09-22 16:58:18 +00:00
Commented Sep 22, 2022 at 16:58 — Yanjan. Kaf.
– Yanjan. Kaf., Commented Sep 22, 2022 at 16:58
@y.kaf. In my mounted() vue function

Gibson
– Gibson

2022-09-22 16:58:41 +00:00
Commented Sep 22, 2022 at 16:58 — Gibson
– Gibson, Commented Sep 22, 2022 at 16:58

André Alçada Padez · Accepted Answer · 2022-09-22 17:16:59Z

2

your console.log is being executed right after the promise request is initiated, you would have to place it at the end inside the then block or, as Nicola says, use async await

try this:

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

edited Sep 22, 2022 at 17:16

answered Sep 22, 2022 at 17:08

André Alçada Padez

11.7k26 gold badges72 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Gibson Over a year ago

Still using async I keep getting an empty array :(

André Alçada Padez Over a year ago

check my edit, should work

André Alçada Padez Over a year ago

had to remove the commas, haha

André Alçada Padez Over a year ago

also, had forgotten the await, now it's correct, sorry

André Alçada Padez Over a year ago

yeah, asynchronous can be tricky, but you'll get use to it

Nikola Pavicevic · Accepted Answer · 2022-09-24 12:13:27Z

1

Try to wait for your data. Move the API call to method:

methods: {
  async getData() {
    const res = await axios.get('/campaigns/new.json')
    this.kits = res.data[0].kits,
  }
}

and then in mounted hook:

async mounted() {
  await this.getData()
  console.log(this.kits)
}

edited Sep 24, 2022 at 12:13

answered Sep 22, 2022 at 17:04

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

3 Comments

Gibson Over a year ago

No luck. Still I need to be able to use this.kits in my mounted and will show up as an empty array :(

Nikola Pavicevic Over a year ago

@Gibson hey mate, did you try it? with async/await you should be able to see the data.

Gibson Over a year ago

Nikola, tried it with no luck, André answer worked using await, thanks a lot

Collectives™ on Stack Overflow

Undefined data variable Vue.js when using axios

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related