难倒了。我如何从axios获取vue中的数据以显示？

Question

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

我想将它从计算结果保存到数据，然后我想在 select 选项中使用 v-for 循环遍历它。

像这样：

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

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

但我终究无法弄清楚我哪里出了问题。

Answer 1

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

另一方面，axios returns 一个承诺，所以如果你的计算正在做 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 之类的。并确保在某个时候的某个地方添加一个捕获或拒绝处理程序。编辑：哎呀是的，另一个答案提醒我我忘记了 "self")

Answer 2

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

选项：

    <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:''
      }
    }

难倒了。我如何从axios获取vue中的数据以显示？

Stumped. How do i get data in vue from axios to display?

axios

vuejs2