将数据从 Laravel 传递和存储到 Vue 的正确方法答案

【问题标题】：Right way to pass and store data from Laravel to Vue将数据从 Laravel 传递和存储到 Vue 的正确方法
【发布时间】：2020-01-23 05:30:23
【问题描述】：

我不习惯 Vue 组件。我的第二个问题是，我想以正确的方式将来自 laravel Blade 的数据传递给 vuejs 组件。因为我所做的是将它存储到 props 中，然后将 props 传递到 data 属性中，如下所示：

//票据刀片

<ticket-create :menu-categories-prop="{{ json_encode($menuCategories) }}"></ticket-create>

//票务组件

export default {
    props: ['menuCategoriesProp'],
    created(){
        this.menuCategories = this.menuCategoriesProp;
    },
    data() {
        return {
            menuCategories: [],
        }
    }
}

现在我有了 menuCategoriesProp 和 menuCategories 数据，这有点多余。我做错了吗？

【问题讨论】：

不，你的方法没问题。通常使用 Vue，当您希望传递道具的孩子想要改变道具时，您只需要在数据中存储道具。因此，例如，如果您想改变 <ticket-create /> 中的任何数据，那么最好将其存储在数据中，否则，您应该只使用 prop 就可以了。 vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
@GBWDev 17 谢谢，非常感谢。

标签： laravel vue.js

【解决方案1】：

您的代码没问题。您可以通过 ajax 获取类别。在你的情况下，不建议使用 ajax。

【讨论】：

这应该是一条评论。

【解决方案2】：

这不是冗余问题，而是逻辑问题。在我看来，您不应该将任何变量从刀片传递到视图。你应该这样做：

您的控制器（可能来自 index 方法）检查请求是否需要 JSON 响应，如果不是则返回视图，否则将集合作为 JSON 响应（继续了解原因）。
加载视图时，VueJs 加载组件并（我就是这样做的）在 mounted 方法中，您对控制器进行 Ajax 调用（可能使用 axios），这将返回集合

这样你就有了一个异步请求管理，这将允许你刷新数据，避免每次重新加载页面。

正如我之前写的，我会尽可能避免将属性从刀片传递到 vue，除非它们是上下文变量，如用户偏好或系统设置。

【讨论】：

将数据从 PHP 传递到 Vue 实际上并没有什么问题，实际上有一些好处，例如请求没有等待时间和减少请求。
其次，您的答案没有解决 OP 的存储与不存储道具在数据中的问题 - 关键是道具已经可以访问，因此值得将其存储在数据中 as好