Question

以下我的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复选框无法正常工作。全部复选框已正确选中，但其余部分未选中。

我假设，加载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)
    }
},

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

如何解决此问题？

谢谢。

Answer 1

在您的演示中，调用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;
  },
  // ...
}

demo

Answer 2

在 vue js 应用程序中使用 axios 时，您在 axios 中使用了'this'关键字，这使编译器难以理解对象，您尝试引用 axios 或vue，因此要解决此问题，请尝试以下代码：

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

希望这可以解决您的问题。

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

2 个答案: