Vue.js使用axios赋值data后变量undefined问题求助

核心原因 #

axios的get请求是异步操作，你的console.log(this.kits)写在了请求外部，会在请求还未完成、then回调里的赋值代码还没执行时就先行运行，此时this.kits自然是初始的undefined或空数组。而Vue开发者工具能看到正确数据，是因为它会实时监听数据变化，等请求完成赋值后就会显示最新状态。

解决方法 #

方法一：将依赖代码放入then回调内部

确保所有依赖异步数据的操作都在请求完成后执行：

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;
      // 此时能拿到正确的this.kits
      console.log(this.kits);
      // 其他依赖这些数据的业务逻辑也需写在此处
    })
}

方法二：使用async/await语法

让异步代码逻辑更接近同步写法，可读性更强：

async mounted() {
  // 等待请求完成并获取响应
  const response = await axios.get('/campaigns/new.json');
  // 为data属性赋值
  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);
}

注意事项 #

所有需要用到这些异步获取数据的业务逻辑，都必须放在then回调内部或者await之后，否则都会遇到数据未就绪的问题。

内容的提问来源于stack exchange，提问作者Gibson