我正在开发这个Laravel项目,我在其中加载了一个组件activities-table
,其中包含从我使用Eloquent ORM Pagination的API调用的主Vue实例数据。但ActivitiesTable.data
未定义:
首先,我在http://app.local/api/activities
上有我的APIpublic 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上的活动:
所以,这是我已经在 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工具中得到了结果:
我已经尝试在this.data = this.rows
挂钩中分配created
,或者尝试不同的生命周期挂钩,但总是未定义或是空数组。
这是Vue组件显示的console.log(this.data)
:
我做错了什么?提前谢谢。