Vue中的循环法

问题描述 投票:0回答:1

我希望能够循环查看某个客户年月的所有发票。

我在DRF中使用django_filter在后台做一些过滤,我的端点是这样的。

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

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

我有一个方法可以根据过滤器获得结果,还有一个手表属性用于在正确的时间检索数据,在这种情况下,当选择月份时。

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中,没有成功。

vuejs2 django-rest-framework axios
1个回答
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
}
}
© www.soinside.com 2019 - 2024. All rights reserved.