时间戳

首页 > 解决方案 > Axios 获取 API 调用导致意外行为

javascript - Axios 获取 API 调用导致意外行为

问题描述

下面我的 CodePen 是应该发生的事情的一个工作示例。那里的一切都按预期工作。我在那里使用硬编码数据。

CodePen：https ://codepen.io/anon/pen/XxNORW?editors=0001

硬编码数据：

info:[
{
    "id": 1,
    "title": "Title one",
    "category_data": {
        "2": "Team",
        "7": "Queries"
    }
}
],

问题：

当我用 AXIOS get 调用替换硬编码数据时，CodePen 复选框无法按预期工作。All复选框已正确选中，但其余复选框未选中。

我假设，加载 API 的轻微延迟是造成这种情况的原因。

mounted() {
   this.getData(); 
},
methods: {
    getData: function() {
      axios
       .get('https://EXAMPLE.com/API/')
      .then(response => {
        this.info = response.data
        this.dataReady = true
      })
      .catch(error => {
        console.log(error)
       this.errored = true
  })
       .finally(() => this.loading = false)
    }
},

在数据准备好之前，我不会加载前端。

我该如何解决这个问题？

谢谢。

标签： javascriptvue.jsvuejs2axios

解决方案

在您的演示中，调用select()断言“全选”功能（选中所有复选框），但这些复选框在解决之前不可用，getData()因此只需移动：select()getData()

async mounted() {
  await this.getData();
  this.select();
},
methods: {
  async getData() {
    const {data} = await axios.get(/* URL TO API DATA */);
    this.info = data;
  },
  // ...
}

演示

推荐阅读