方法1

Question

在Vuetify和Laravel框架中使用VueJS。尝试了许多不同的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

或者，我也尝试构建一个组件，其中数据作为prop传递，以解决被动问题，但仍然不起作用。其代码如下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>中。所以我将组件放在一个文件中，现在它运行得很好。

如何在使用Laravel中的Vuetify获取数据的AJAX请求之后填充v-data-table？

方法1

方法2

1 个答案: