Как заполнить таблицу v-data после AJAX-запроса на выборку данных с помощью Vuetify в Laravel?

Question

Использование VueJS с Vuetify и в среде Laravel.Было опробовано много различных методов AJAX и определяющих компонентов, но ничего не получалось.Кажется, что когда выполняется вызов ajax, переменная обновляется, что я проверил в console.log, но это не отражается в DOM.Мой текущий код выглядит следующим образом

Метод 1

В home.blade.php

<div id="items-display-table">
    @{{itemslist}}
    <v-data-table
        :items="itemslist"
        class="elevation-1"
        hide-actions
        hide-headers
    >
        <template slot="items" slot-scope="props">
            <td>@{{ props.item.name }}</td>
            <td class="text-xs-right">@{{ props.item.calories }}</td>
            <td class="text-xs-right">@{{ props.item.fat }}</td>
            <td class="text-xs-right">@{{ props.item.carbs }}</td>
            <td class="text-xs-right">@{{ props.item.protein }}</td>
            <td class="text-xs-right">@{{ props.item.iron }}</td>
        </template>
    </v-data-table>
</div>

И в app.js

var itemsDisplayTable = new Vue({
    el: '#items-display-table',
    data: {
        itemslist: []
    },
    created: function () {
        this.fetchData();
    },
    methods: {
        fetchData: function () {
            var self = this;
            var apiURL = '/api/cards';
            axios.get( apiURL )
            .then ( function( response ) {
                data = response['data'];
                // console.log(data);
                self.itemslist = data;
                console.log(self._data);
            });
        }
    }
});

Метод 2

В качестве альтернативы я также попытался создать компонент с данными, передаваемыми в качестве опоры, для решения реактивной проблемы, но все же он не работает.Код для этого следующий в home.blade.php

<div id="cards-display-table">
    <grid
        :itemslist="itemslist">
    </grid>
</div>

В app.js

Vue.component('grid', require('./components/DataTable.vue'));

И создание экземпляра такое же, как указано выше.

Код в файле DataTable.vue выглядит следующим образом:

<template>
    <div>{{itemslist}}</div>
    <v-data-table
        :items="itemslist"
        class="elevation-1"
        hide-actions
        hide-headers
     >
         <template slot="items" slot-scope="props">
             <td>@{{ props.item.name }}</td>
             <td class="text-xs-right">@{{ props.item.calories }}</td>\
             <td class="text-xs-right">@{{ props.item.fat }}</td>\
             <td class="text-xs-right">@{{ props.item.carbs }}</td>\
             <td class="text-xs-right">@{{ props.item.protein }}</td>\
             <td class="text-xs-right">@{{ props.item.iron }}</td>\
         </template>
     </v-data-table>
</template>

<script>
    export default {
        props: {
            itemslist: Array
        }
    }
</script>

Как мне действовать?

Answer 1

Я нашел решение своего вопроса. Это была довольно глупая ошибка. Так что на всякий случай, если кто-нибудь столкнется с этим снова, я решил ответить на него.

Проблема заключалась в том, что я регистрировал новый корневой компонент для отображения элементов в файле app.js. И четко указано, что для работы компонентов Vuetify они должны быть заключены в <v-app>. Поэтому я поместил компоненты в один файл, и теперь он работает отлично.