Question

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

我想将这个从计算中保存到数据，然后我想在带有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（这是一个函数：计算属性this.items）中分配items（好像它是一个变量）对我来说看起来有点不对，但是我已经错了从来没有见过，所以我不知道有什么影响。

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

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

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

只要promise成功解析，

items（现在是数据道具）就会被分配到response.data。（注意：您可能知道您的api如何格式化您的回复，但为了以防万一，请确保response.data实际上是您想要的，而不是response.body.data或其他什么。并确保添加捕获或者在某个地方也有拒绝处理程序。编辑：哎呀，是的，另一个答案提醒我，我忘记了自己＆＃34;）

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获取数据到显示？

2 个答案: