Loop over method in vue - vuejs2

Question

I want to be able to loop over all the invoices for a given client-year-month
I use django_filter in DRF to do some filtering on the backend, my endpoints look like this:
all invoices: http://127.0.0.1:8000/invoices/
filters: http://127.0.0.1:8000/invoices/?client=2&year=2020&month=5
I have a method that gets the results based on the filter, and a watch property for retrieving the data at the right time, in this case when a month is chosen.
methods: {
retrieveResults() {
this.$axios.$get('/invoices/', {
params: {
client: this.client,
month: this.month,
year: this.year,
},
});
},
},
watch: {
month: {
handler: 'retrieveResults',
},
},
The response I get looks like this (simplified):
[{
"id":119,
"client":2,
"invoice_id":"2020001",
"order_date":"2020-05-07",
},
{
"id":120,
"client":2,
"invoice_id":"2020002",
"order_date":"2020-05-07",
}]
Everything is working as expected, I see the right results in my network tab depending on the choices, my question is how do I v-for loop over this? I've tried numerous things, nothing has worked so far.
I tried wrapping the retrieveResults in a vuetify v-data-table, without success.

Answer 1

Something like this:
// 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
}
}