Vue.js：无法使用“v-on”捕获名称中带有点的事件

Question

我将 Vue.js (2.6) 与 DataTables.js 一起使用并尝试捕获页面更改事件。

Datatables 中的页面更改事件被命名（与所有 DataTables 事件一样，它在点后page.dt具有命名空间）dt

如果我尝试按照文档执行此操作，则不起作用。
我想，它不起作用，因为 Vue 使用事件名称中的点来定义事件修饰符，例如click.once

我的问题是：有没有办法使用 Vue 捕获名称中带有点的此类事件？

这是 HTML 指令：

 <table class="table" id="dataTable" v-on:page.dt="pageChange">

这是我的方法pageChange：

  methods: {
            pageChange(e) {
                var info = datatable.page.info();
                alert('Showing page: ' + info.page + ' of ' + info.pages);
           }
  }
                

以下 jQuery 事件处理程序完美运行：

  $('#dataTable').on('page.dt', function () {
            var info = datatable.page.info();
            alert('Showing page: ' + info.page + ' of ' + info.pages);
  });

 <table class="table" id="dataTable" v-on:page.dt="pageChange">

Answer 1

您应该能够使用动态参数语法：

v-on:[`page.dt`]="pageChange"

或者：

@[`page.dt`]="pageChange"

注意反引号的使用。您不能使用其他形式的引号，因为属性名称中不允许使用它们。

更新：

我使用提供的JSFiddle进行了进一步调查。

我提供的代码确实向元素添加了一个page.dt事件侦听器<table>。在开发者工具中可以看到：

因此，如果您想使用 Vue 捕获名称中带有点的事件，那么我建议的代码是正确的。

然而...

这不是这里实际需要的。

page.dt是一个命名空间的 jQuery 事件。实际的事件被称为page，而不是page.dt。当事件触发但事件本身被调用时，jQuery 将按名称空间进行内部过滤page。当您使用 jQuery 添加事件时，page.dt您会看到它page向 DOM 添加了一个事件：

所以你可能会认为我们可以通过使用v-on:page来解决这个问题。我当然做到了。但可惜没有。

DataTables 调用 jQuery 的trigger方法来触发该page.dt事件。这有两件事：

1. 它调用所有已通过 jQuery 注册的侦听器。alert这就是使用 jQuery 示例时显示的方式。
2. 它触发本机事件。或者至少，它声称是这样做的。它实际上所做的（通过查看 jQuery 代码）是尝试调用与事件同名的元素上的方法。对于本机事件可能会很好地工作，但对于自定义page事件它不会执行任何操作。

所以 Vue 无法检测到该事件的原因是因为没有触发 DOM 事件。这都是 jQuery 内部的魔法，而不是真正的 DOM 事件。

然而，这确实为我们提供了一个基于 Vue 的解决方法。

鉴于 jQuery 将尝试调用在元素上调用的方法，page我们可以为其提供：

:page.prop="pageChange"

我用你的小提琴试过了，它确实有效。