如何使用 Vue js 过滤 Laravel 数据集合然后渲染它们？答案

【问题标题】：How to use Vue js to filter Laravel data collection then render them?如何使用 Vue js 过滤 Laravel 数据集合然后渲染它们？
【发布时间】：2018-03-06 07:43:27
【问题描述】：

我有一个简单的 Laravel 网站，其中显示的产品数量有限（实际上是 15 部智能手机），并且不需要分页。在网站首页，自动显示所有产品。

我的问题是，我希望用户可以使用 à range filter on price、OS 等来过滤这些数据......那么我如何使用 Vue js 过滤已经使用 Laravel Query builder 从数据库返回的数据，保持考虑到 SEO 吗？

【问题讨论】：

标签： laravel laravel-5 vue.js vuejs2

【解决方案1】：

如果您的产品采用对象数组的形式，就像 Laravel 集合在序列化为 JSON 时一样，您可以使用像 collect.js 这样的库来过滤您的产品，就像使用 Laravel 集合一样。

该库基于 Laravel 集合，实际上具有几乎相同的 API，因此您将立即熟悉可用的方法。

您的用例的一个示例可能是过滤，例如操作系统：

import collect from 'collect.js';

return collect(products).where('os', 'Android').items;

可以在project's GitHub README 上找到所有可用方法的完整列表。

【讨论】：

太棒了！最后一件事，假设作为一个简单的用例，我通过这种方式从 web.php 获取数据： $products = DB::table('products')->get();返回视图('main',['products' => $products]);我如何在 Javascript 中使用我的数据，例如使用 Collect js，然后将对象返回给 Laravel 以进行渲染 / ？
要在 JavaScript 中使用数据，只需将脚本标签添加到您的视图中，其中包含：var products = {!! json_encode($products) !!}。这将可以在 Vue 中访问，您应该使用它来重新渲染过滤后的产品，例如覆盖 Laravel 输出的渲染产品。对于 SEO，您无论如何都不想过滤，只要搜索引擎可以在不需要 JavaScript 的情况下检索所有产品，您的网站就可以被索引。
这实际上是你在说我不知道该怎么做！我可以用 laravel 渲染，用 Vue 渲染，但是如何用 Laravel 渲染然后用 Vue 重新渲染？
您需要做的将是例如如果你有一个ul，你可以使用 laravel 在页面加载时渲染产品，请将其放在 noscript 标记中，以便仅在浏览器不运行 JavaScript 时使用它，然后使用 Vue 呈现的列表跟随它使用例如v-for 语法。通过这种方式，可以为搜索引擎呈现完整的产品列表，而其他浏览器将根据您的 products 变量在 Vue 加载页面时呈现内容。当用户过滤他们的选择时，Vue 会相应地重新渲染产品。

【解决方案2】：

您可以阅读此内容。希望对您有所帮助。 Filter data using vue js

【讨论】：