使用 axios 时未定义的数据变量 Vue.js

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:

Answer 1

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

Answer 2

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

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

and then in mounted hook:

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