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

Question

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

我在 SO 上看到了几篇类似的帖子，建议我使用 props 将数据从 Laravel Blade 模板传递到 Vue.js 组件。这是一个示例：
How to pass a PHP variable to Vue component instance in Laravel blade?

我的工作非常好，但现在我不知道如何在页面加载后数据动态变化时更新组件。

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

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

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

Answer 1

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

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

<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>