L oop по методу vue - PullRequest
Новая
       60

L oop по методу vue

0 голосов
/ 08 мая 2020

Я хочу иметь возможность l oop по всем счетам за данный клиент-год-месяц

Я использую django_filter в DRF, чтобы выполнить некоторую фильтрацию на бэкэнде, мои конечные точки выглядят следующим образом:

все счета: 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 -за l oop сверх этого? Я пробовал множество вещей, но пока ничего не помогло.

Я безуспешно пытался обернуть retrieveResults в vuetify v-data-table.

1 Ответ

1 голос
/ 08 мая 2020

Примерно так: 

// 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
}
}
...