VueJS Jquery 数据表集成：将方法附加到动态 html 元素

Posted 2023-02-22

【中文标题】VueJS Jquery 数据表集成：将方法附加到动态 html 元素

【英文标题】：VueJS Jquery Datatable Integration: Attach method to dynamic html element

【发布时间】：2018-03-12 05:02:32

【问题描述】：

我将 Jquery 数据表与 VueJS 集成在一起 Here 是我的代码

我想将我的 Vue 组件的方法附加到 button My Button:

row.push('<button @click="vm.buttonPressed()">My Button</button>'); //Add a method when button is pressed

我该怎么做？

【参考方案1】：

包装器组件背后的想法是将 DOM 中由 Vue 控制的部分与其他东西将控制的部分分开。在data-table 组件内部，jQuery 控制着 DOM。相应地处理您的事件：

$(this.$el).on('click button', (event) => 
  this.buttonPressed();
);

【参考方案2】：

您是否尝试过使用 Vue v-for 指令构建表来呈现行，然后只在结果表上调用 DataTable 方法？

那就是：

像通常使用 Vue 组件一样构建表和行。 从中创建一个“DataTable”，如下所示：$('#example').DataTable();

看看我用你的修改后的版本：

https://codepen.io/feload/pen/PJKoJP?editors=1010

祝你好运！

【讨论】：

有效，但是如果 vue 中的数据更新，这不会更新数据表的行。