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

Question

我对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基本上根据我刚收到的数据重新渲染？ 有没有一种方法可以“更新道具”，以便Vue.js能够检测到更改并自动为我重新呈现整个报表组件？

这是我遇到的问题，经过大量研究后，我找不到如何执行此操作的地方。 谢谢。

Answer 1

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

我有一个示例，说明如何从组件本身内部动态更新Vue数据。 我不确定如何让外部JS直接更新Vue组件，但我认为这是一个不错的选择。 我使用的是axios而不是Ajax，但是原理是相同的（大多数5.5版本以后的Laravel安装默认都包含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>