使用来自Laravel分页数组的axios数据

Question

好吧，我被难住了，我知道这将是一件愚蠢的事情。所以让我更详细地解释一下。上面的代码是我认为应该用于从Laravel控制器到vue组件的分页的代码。我发现我没有完全考虑分页，我可以稍后处理，但当我这样做时，第一个结果不可用，我不明白我的语法哪里错了。

Vue:

<ul role="list" class="space-y-4">
<li
v-for="item in allActivities"
:key="item.id"
class="bg-gray-800 px-4 py-6 shadow sm:p-6 sm:rounded-lg"
>
{{ item.description }}
</li>
</ul>

安装：

mounted() {
axios
.get("/activity")
.then((response) => (this.allActivities = response.data));
},

控制器

public function index()
{
$activity = Activity::paginate(10);

return $activity;
}

如果在v-If中，我将其更改为allActivities.data，则它将刷新以显示数据，直到我重新加载页面并获取未找到的id。如果我将axios更改为response.data.data，它会起作用，但我会丢失分页。

IM卡住

Answer 1

response.data是laravel 的结果

response.data.data如果data键输入结果，即您的型号列表

如果使用，response.data将包含这些密钥

当前页面
数据
first_page_url
从
last_page_url
链接
next_page_url
路径
per_page
prev_page_url
到
总

Answer 2

我没有完全理解这个问题。如果要更改页面，请将要显示的页面值发送到fetchActivities((方法。

编辑！

<script>
export default {
data() {
return {
allActivities: {
data: [],
total: null
}
}
},
methods: {
async fetchActivities(page = 1){
const {data:activities} = await axios.get(`/activity?page=${page}`)
this.allActivities.data.push(activities.data)
this.allActivities.total = activities.total
}
},
created() {
this.fetchActivities()
}
}
</script>

<template>
<div v-if="allActivities.data.length > 0">
<ul role="list" class="space-y-4">
<li
v-for="(item, index) in allActivities.data"
:key="index"
class="bg-gray-800 px-4 py-6 shadow sm:p-6 sm:rounded-lg"
>
{{ item.description }}
</li>
</ul>
</div>
</template>