Datatables Ajax 无法渲染 Vue 组件

Posted 2023-03-14

【中文标题】Datatables Ajax 无法渲染 Vue 组件

【英文标题】：Datatables Ajax Cant render Vue component

【发布时间】：2019-02-19 10:58:43

【问题描述】：

我正在尝试以 Ajax 模式连接 Datatable 和 Vue 组件，如果成功，它应该会呈现产品的 Order 按钮。我为我的 Web 应用程序创建了一个 API，并通过 get-query 将 JSON 传递给 AJAX 表属性。所有数据都正确显示，甚至一个按钮都是一个订单，但它不是一个Vue组件，而是一个简单的html。 所以我把这个字符串传递给 JSON

但是结果，这一行被写入表格单元格，并没有转换成vue-component...

如果我在普通数据表模式下（不使用 Ajax）传递这一行 - 组件被渲染，没有问题。

我使用 Laravel 5.5

【问题讨论】：

展示你目前拥有的东西，人们会更容易提供帮助

例如：Vue 组件的标准 html： Order 我把这个 html 放到 JSON 文件中，然后传递给 AJAX 和 DataTable 将它渲染为文本而不是作为真正的按钮

我在这里描述了这个datatables.net/forums/discussion/48598/…

【参考方案1】：

由于在 Vue 中封装/使用 jQuery 组件很容易，因此用户经常误以为 jQuery 组件与 Vue 兼容。

要了解的最重要的事情之一是 Vue 组件生命周期（创建、挂载等。https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks）。你也许可以在 jQuery DataTable 中渲染一个 Vue 按钮，但那是因为你很幸运能够尽早获得数据；即，在 Vue 完全呈现 Vue 包装器组件之前，您拥有数据。

这解释了为什么 ajax 不起作用。该组件已被渲染。即使 jQuery 组件重新渲染，它也不会渲染 Vue 组件。您还会遇到其他问题，例如 Vue 事件在随后的重新加载/刷新中未正确连接，组件行为不正确（可见、隐藏、v-if），因为 Vue 是 Reactive 而 jQuery Plugin/Component 通常不是。

因此，为了包装一个 jQuery 组件，您有两种选择：

每次收到 ajax 数据并在 Vue 创建事件中渲染 jQuery 组件时，都必须销毁并重新创建 Vue 组件。这有助于包装器组件重新渲染、连接事件等... - 部分解决方案，请在此处查看 Tony 的答案：Vuejs and datatables: table empty when using v-for to fill data

接受 jQuery 组件不是 Reactive 的事实，并在顶部创建一个翻译层来与 Vue.js 中的 jQuery 组件通信。示例（无耻插件）我的 jQuery DataTable 组件包装器：https://github.com/niiknow/vue-datatables-net