时间戳

首页 > 解决方案 > 如何将数据从 PHP Laravel 传递到 Vue.js 并在数据更改时重新渲染 Vue.js 组件？

php - 如何将数据从 PHP Laravel 传递到 Vue.js 并在数据更改时重新渲染 Vue.js 组件？

问题描述

我对 Vue.js 还是有点陌生​​，所以我可能从根本上误解了它的反应性，但基本上，我想将一些数据从 PHP Laravel 传递给 Vue.js 组件并拥有 Vue.js 组件当数据发生变化时自动更新。

我在 SO 上看到了几个类似的帖子，建议我使用props将数据从 Laravel Blade 模板传递到 Vue.js 组件。这是一个示例：
如何在 Laravel Blade 中将 PHP 变量传递给 Vue 组件实例？

我有这个工作得很好，但现在我被困在如何让组件在页面加载后数据动态变化时更新。

具体来说，我在特定网页上有一个报告表，当用户单击某些按钮等时，我使用 Ajax 调用 Laravel 控制器操作，该操作在我的 Laravel 模型中重新运行查询以获取新数据报告。

我有 PHP 数组/JSON 中的数据，并且该数据正在正确返回到客户端，并且我可以在 JS 中访问它，但是现在，我需要做什么来强制 Vue.js 中的报告组件。 js 基本上根据我刚刚收到的数据重新渲染？有没有办法“更新道具”，以便 Vue.js 检测到更改并自动为我重新呈现整个报告组件？

这就是我卡住的地方，经过相当多的研究，我找不到如何做到这一点。谢谢你。

标签： phpajaxlaravelvue.jsvue-component

解决方案

您是否在 Vue 组件之外使用 Ajax ？还是在其中作为一种方法？

我有一个如何从组件本身动态更新 Vue 数据的示例。我不确定如何让外部 JS 直接更新 Vue 组件，但我觉得这是一个不错的选择。我使用axios的是 Ajax 而不是 Ajax，但原理是一样的（默认情况下，Axios 包含在大多数 Laravel 5.5 之后的安装中）。

<template>
    <div>
        <div id="reports">
            <!-- Display data -->
            {{ reports }}
        </div>
        <button @click="refreshReports">Refresh</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                endpoint: '/api/MY_ROUTE/'
            };
        },

        props: {
            reports: Object
        },

        methods: {
            // Make Axios call to API endpoint
            refreshReports() {
                // GET version
                axios.get(this.endpoint)
                    .then(({data}) => {
                        this.reports = data.data;
                    });

                // POST version
                axios.post(this.endpoint, {
                    KEY: 'VALUE',
                }).then(({data}) => {
                    this.reports = data.data;
                });

                /*
                    `data.data` assumes the returned response is a JSON Resource

                    if it's not returning the correct data, put a `console.log(data)` and see how it's getting returned!
                 */
            }
        }
    };
</script>

在您的routes/api.php文件中，您有这样的路线：

// GET version
Route::get('MY_ROUTE', 'ReportController@getReports');

// POST version
Route::post('MY_ROUTE', 'ReportController@getReports');

你的控制器会有这样的方法：

// app/Http/Controllers/ReportController
public function getReports(Request $request) {
    return Reports::all();
}

那有意义吗？

更新：

我不确定如何让外部 JS 直接更新 Vue 组件

我知道您可以导入外部 JS 脚本并在方法中使用它们的功能，但我以前从未这样做过。

就像是：

<script>
import { myFunction } from '../external.js'

export default {
    methods: {
        refreshReports() {
            // I have no idea if this is the correct way to do it, just a guess!
            this.reports = myFunction();
        }
    }
};
</script>

推荐阅读