Laravel Eloquent ORM Pagination + Vue.js组件

时间:2018-03-02 17:05:39

标签: javascript php laravel vue.js vuejs2

我正在开发这个Laravel项目,我在其中加载了一个组件activities-table,其中包含从我使用Eloquent ORM Pagination的API调用的主Vue实例数据。但ActivitiesTable.data 未定义

首先,我在http://app.local/api/activities

上有我的API
public function getActivities()
{
    $activities = Activity::orderBy('created_at', 'desc')->paginate(100);

    foreach($activities as $k => $activity)
    {
        $data = [
            'user' => isset($activity->user) ? $activity->user->name : NULL,
            'avatar' => isset($activity->user) ? $activity->user->avatar : NULL,
            'ip' => $activity->remote_addr,
            'country' => $activity->country,
            'referer' => $activity->referer,
            'action' => $activity->request_uri,
            'date' => $activity->created_at->toDateTimeString(),
            'timeago' => $activity->created_at->diffForHumans()
        ];

        $activities[$k]->custom_data = $data;
    }

    return $activities;
}

然后我有我的主Vue实例方法,我在文件app.js上调用API:

loadActivities: function(page = 1) {
    axios.get('/api/activities?page=' + page)
        .then(function (response) {
            app.activities = response.data;
        });
},

所以这就是Vue Tool上的活动:

activities on Vue

所以,这是我已经在 app.js 上注册的组件:

<template>
    <!-- Activities -->
    <table id="activities">
        <thead>
        <tr>
            ...columns...
        </tr>
        </thead>
        <tbody>
            ...data...
        </tbody>
    </table>
    <!-- /Activities -->
</template>

<script>
    module.exports = {
        props: {
            rows: {

            }
        },
        data: function() {
            return {
                data: this.rows
            }
        },
        created: function() {

        },
        methods: {
            paginate: function(page) {

            }
        }
    }
</script>

<style scoped>

</style>

然后是<activities-table>组件:

<activities-table
    :rows="this.activities"
    ></activities-table>

我在同一个Vue工具中得到了结果:

data in Vue

我已经尝试在this.data = this.rows挂钩中分配created,或者尝试不同的生命周期挂钩,但总是未定义或是空数组。

这是Vue组件显示的console.log(this.data)

developer tool

我做错了什么?提前谢谢。

0 个答案:

没有答案