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

发布于09月23日

这快把我逼疯了.

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

当我之后试着用this.kits或做console.log(this.kits)时，我得到undefined or empty array.

请帮帮忙.谢谢

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)将输出:

推荐答案

您的console.log是在Promise请求启动之后立即执行的，您必须将其放在then块的末尾，或者，正如Nicola所说，使用Async AWait

试试这个:

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