VueJS: директива v-for не отображает элементы, несмотря на наличие объектов в массиве

Question

Я пытаюсь отобразить мой объект ответа API в строках таблицы. С конечными точками проблем нет. Я мог бы получить данные без каких-либо проблем. Данные разбиты на страницы. Я могу видеть содержимое объекта массива (используя двойные фигурные скобки). Но направление v-for ни на что не влияет.

Я попробовал несколько способов исправить. Один из них использует response.data.data для обработки, но это не сработало. Я также пытался выполнить итерацию по customer.data, но получил те же результаты.

Эта часть была взята из моего компонента

import axios from 'axios'

export default {
    data () {
        return {
            customers: [],
        }
    },

    mounted: function() {
        axios.get('http://127.0.0.1:8000/customer/all').then(res => {

            this.customers.push(res.data);

        });
    },

Вот это директивная часть:

 <tr v-for="customer in customers">
     <td>
         <input class="uk-checkbox" type="checkbox">
     </td>
     <td>{{ customer.mail }}</td>
     <td>
        {{ customer.telephone }}
     </td>
     <td>
         <ul class="uk-iconnav">
            <li><span class="uk-icon" uk-icon="icon: check"></span></li>
            <li><span class="uk-icon" uk-toggle="target: #user-request" uk-icon="icon: question"></span></li>
            <li><span class="uk-icon" uk-icon="icon: trash"></span></li>

         </ul>
      </td>
  </tr>
  {{ customers }} => this is OK

покупатели json output

[ { "current_page": 1, "data": [ { "id": 1, "user_info": "test", "password": "test", "gsm": "123123213", "telephone": 124, "mail": "test@test", "address": "test", "created_at": null, "updated_at": null } ], "from": 1, "last_page": 1, "next_page_url": null, "path": "http://127.0.0.1:8000/customer/all", "per_page": 4, "prev_page_url": null, "to": 1, "total": 1 } ] 

Это должно быть отрендерено, но это не рендеринг. Я не получил никаких ошибок консоли. В чем проблема? В любом случае, спасибо.

Answer 1

В вашем фрагменте res.data - это массив, содержащий объект с атрибутом data, который имеет значение для данных клиента, которые вы хотите отобразить.

Чтобы сохранить полученные значения данных о клиентах в массиве customers вашего компонента, вы можете распространить их следующим образом:

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers.push(...res.data[0].data);
   });
}

Если массив customers, как никакой другой источник модификации, вы даже можете сделать:

mounted: function() {
   axios.get('http://127.0.0.1:8000/customer/all').then(res => {
      this.customers = res.data[0].data;
   });
}