模拟数组在模板中不可用

时间:2018-05-02 09:39:11

标签: vue.js

我希望我的数组在两个给定日期之间保持记录以始终反映所选择的从 - 到日期,但只是在计算方法中从Axios返回response.data似乎并不做的伎俩。如何获得计算方法将结果提供给应用程序?

<template>
    <div>
      <p v-for="event in events">{{event.title}}</p>
    </div>
</template>

<script>
export default {
    name: "App",
    data () {
        return {}
    },
    computed: {
        fromDate: function() { ..code.. },
        toDate: function() { ..code.. },
        events: function() {
            axios.get('json/' + this.fromDate + '/' + this.toDate).then(response => {
                return response.data;
            });
        }
    }
}
</script>

1 个答案:

答案 0 :(得分:1)

events: function() {
  axios.get('json/' + this.fromDate + '/' + this.toDate)
    .then(response => {
      return response.data;
    });
}

首先,你并没有在这个功能中回归任何东西。为了实现这一点,您可以使用名为vue-async-computed的插件

// ...
import AsyncComputed from 'vue-async-computed'

// ...
Vue.use(AsyncComputed)

// ...
asyncComputed: {
  events: function() {
    return axios.get('json/' + this.fromDate + '/' + this.toDate)
      .then(response => {
        return response.data;
      });
  }
}

使用vue-async-computed和ES7也可以:

asyncComputed: {
  async events() {
    const response = await axios.get('json/' + this.fromDate + '/' + this.toDate)
    return response.data
  }
}