vue中的循环方法

Question

我希望能够遍历给定客户年月的所有发票

我在 DRF 中使用 django_filter 对后端进行一些过滤，我的端点如下所示：

所有发票：http://127.0.0.1:8000/invoices/

过滤器：http://127.0.0.1:8000/invoices/?client=2&year=2020&month=5

我有一个基于过滤器获取结果的方法，以及一个用于在正确的时间检索数据的 watch 属性，在这种情况下是选择一个月。

methods: {
  retrieveResults() {
    this.$axios.$get('/invoices/', {
      params: {
        client: this.client,
        month: this.month,
        year: this.year,
      },
    });
  },
},

watch: {
  month: {
    handler: 'retrieveResults',
  },
},

我得到的响应如下所示（简化）：

[{
  "id":119,
  "client":2,
  "invoice_id":"2020001",
  "order_date":"2020-05-07",
},
{
 "id":120,
 "client":2,
 "invoice_id":"2020002",
 "order_date":"2020-05-07",
}]

一切都按预期工作，我在网络选项卡中看到正确的结果，具体取决于选择，我的问题是我如何 v-for 循环呢？我已经尝试了很多东西，到目前为止没有任何效果。

我尝试将 retrieveResults 包装在 vuetify v-data-table 中，但没有成功。

Answer 1

类似这样的：

// in a template:
<div v-for="invoice in invoices" :key="invoice.id">
// here is a component(s) for showing invoice content
</div>
...
// in a component:
data: {
   return {
     invoices: []
   }
},
methods: {
  async retrieveResults() {
   const { data: invoices} = await this.$axios.$get('/invoices/', {
      params: {
        client: this.client,
        month: this.month,
        year: this.year,
      },
    });
   this.invoices = invoices
}
}