难住了。如何从 axios 获取 vue 中的数据进行显示？答案

【问题标题】：Stumped. How do i get data in vue from axios to display?难住了。如何从 axios 获取 vue 中的数据进行显示？
【发布时间】：2018-02-14 11:45:55
【问题描述】：

我有一个对 api 的 axios 调用，它调用数组中的 22 个对象。

我想将这个从计算出来的数据保存到数据中，然后我想用 v-for 在一个选择选项中循环这个。

类似这样的：

<option v-for="item in items">{{item}}</option>

computed: {
    items(){
        return axios.post('API Call').then(response =>{ this.items = 
        response.data });
     }
}

但我终其一生都无法弄清楚我哪里出错了。

【问题讨论】：

标签： vuejs2 axios

【解决方案1】：

通常情况下，我只是通过破解它来解决这个问题。这就是我为解决问题所做的：

选项：

    <option v-for="item in data" :value='item.id'>{{item.name}</option>

方法：

    test_data: function(){
      var self = this;
      axios.post('API Call Here', {})
            .then(response => { 
                self.data = response.data;
                })
            .catch(function(error){
                console.log(error);
            })
    }

还有数据：

    data () {
      return {
        data:''
      }
    }

【讨论】：

【解决方案2】：

在this.items（这是一个函数：计算属性items）中分配this.items（就好像它是一个变量一样）对我来说有点不对劲，但我从来没有见过，所以我没有知道有什么效果。

另一方面，axios 返回一个承诺，所以如果您的计算正在执行return axios.whatever().then(etc)，您将从计算的属性中得到一个承诺，这可能不是您想要的。

我认为在这种情况下，您希望 items 成为普通数据属性，然后在方法或生命周期挂钩或观察者中执行 axios 调用，然后当您这样做时：

data() { 
  return {
    items: [some default initial value here]
  }
},
created() {
  var self = this;
  axios.post('API Call').then(response => { 
    self.items = response.data
  });
}

items（现在是一个数据道具）将被分配给response.data，只要承诺成功解决。（注意：您可能知道您的 api 如何格式化您的响应，但以防万一，请确保 response.data 实际上是您想要的，而不是 response.body.data 或其他东西。并确保添加捕获或拒绝处理程序在某个时候也在某个地方。编辑：哎呀，是的，另一个答案提醒我我忘记了“自我”）

【讨论】：