2

我有一个由 Vue 和 Vue Isotope 加载的新闻页面。Vue isotope 要求我的数据是一个数组，以便当用户单击“加载更多”按钮时，我可以将更多文章附加到同位素。它的工作方式是，当用户单击“加载更多”时，使用 Laravel 的分页功能，我可以简单地将下一个加载的文章附加到我的 Vue 实例中现有的文章数组中。

我遇到的问题是我的 Laravel 集合总是返回一个对象而不是数组，即使我使用toArray().

如果我直接从 eloquent using 加载我的文章get()，这可以正常工作并且是一个数组，但是因为我需要将多个 eloquent 查询合并在一起，我不得不使用一个集合merge()并将 4 个 eloquent 查询合并到一个大集合中。这就是我认为强制集合始终作为对象返回的原因。

以下是控制器的功能：

public function apiIndex()
{
    $articles = Article::latest('featuredArticle')->latest()->published()->get();
    $twitterPosts = TwitterPost::where('published', 'published')->get();
    $facebookPosts = FacebookPost::where('published', 'published')->get();
    $vimeoPosts = VimeoPost::where('published', 'published')->get();

    $articles->map(function ($post) {
        $post['type'] = 'Article';
        return $post;
    });

    $twitterPosts->map(function ($post) {
        $post['type'] = 'Twitter';
        return $post;
    });

    $facebookPosts->map(function ($post) {
        $post['type'] = 'Facebook';
        return $post;
    });

    $vimeoPosts->map(function ($post) {
        $post['type'] = 'Vimeo';
        return $post;
    });

    $allPosts = collect();

    $allPosts = $allPosts->merge($articles);
    $allPosts = $allPosts->merge($twitterPosts);
    $allPosts = $allPosts->merge($facebookPosts);
    $allPosts = $allPosts->merge($vimeoPosts);

    $allPosts = $allPosts->sortByDesc('created_at')->paginate(15);

    return response()->json($allPosts);

}

我能得到的最接近的是添加->values()到末尾，$allPosts但是这会删除下一页的分页链接，并且只检索实际的帖子，所以我不能使用它。

这是一个将初始$allPosts数据检索到 Vue的小片段

    mounted () {
        axios.get(this.page)
        .then(response => ([
            this.list = response.data.data,
            this.page = response.data.next_page_url
        ]))
    },

这是用户单击“加载更多”按钮时调用的方法的片段

        loadMore: function() {
            axios.get(this.page)
            .then(response => ([
                this.paginatedList = response.data.data,
                this.list.push(this.list, this.paginatedList),
                this.page = response.data.next_page_url
            ]))
        },

因为响应是一个对象，所以 usingthis.list.push()不起作用并抛出错误，因为this.list应该是一个数组。

此外，这是我的 Vue 数据对象的片段

        data: {
            page: "{{route('api-news')}}",
            list: [ 

            ],
            paginatedList: [

            ],
},

我的列表对象的图像（其中列表应该是一个数组）：

在此处输入图像描述

我如何能够强制$allPosts作为数组返回？

4

2 回答 2

9

我会尝试在values() 之前而paginate()不是之后添加调用。

$allPosts = $allPosts->sortByDesc('created_at')->values()->paginate(15);
return response()->json($allPosts);

Vue 确定数组是否被视为数组还是对象的方式是通过查看键：如果它们是数字、零索引和连续的，它将把它当作一个数组，否则，它将它当作一个对象。

在您的情况下，sortByDesc()集合方法维护原始键，因此 Vue 看到非顺序键并将其作为对象处理。通过运行您的排序集合，values()您应该得到一个正确索引的集合以传递给 Vue。

更新：

根据您的评论，上述解决方案仅适用于结果的第一页而不适用于其他结果，我怀疑该paginate()方法也在维护原始密钥。所以第一个块的键从 0 开始，但第二个块的键从 15 开始。您可能需要覆盖它，以便每个块重新索引为 0。

在将结果推送到模型之前，您也可以在 Vue 代码中执行此操作。类似的东西response.data.list.filter(item => item)可能会起作用。

于 2018-12-18T00:37:16.890 回答
0

正如@Graeme 所说，也遇到了这个问题，这适用于第一页，但不适用于第二页。最后，我最终手动覆盖了中的项目LengthAwarePaginator并重置了数组索引。

        $collect = $Products->get()->values();
        
        $ProductsPaginated = ProductResource::collection($collect)->paginate(12);
        $items = $ProductsPaginated->items();
        
        $decodeFix = json_decode($ProductsPaginated->toJson());
        $decodeFix->data = array_values($items);

        return json_encode($decodeFix);
于 2020-11-03T11:16:50.283 回答