Vue-tables-2 检测应用了哪个过滤器

Question

我正在尝试使用两个过滤器设置基本服务器端 vue-tables-2 - 一个是下拉列表，另一个是搜索字段。我无法检测 requestFunction() 中应用了两个过滤器中的哪一个，因此我可以将请求发送到服务器。目前，我只是尝试在应用过滤器/更改输入时控制台记录输入过滤器名称和值。

JSFiddle：

https://jsfiddle.net/kbpq5vb3/39/

HTML

<h1 class="vue-title">Vue Tables 2 Demo</h1>

<div id="app">
  <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options"></v-server-table>
</div>

VueTable:

    Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  data: {
    columns: ['name', 'username'],
    options: {
      requestAdapter(data) {
          console.log(data.query); // detect which filter was applied / which input changed
        },
        responseAdapter(resp) {
          return {
            data: resp,
            count: resp.length
          }
        },
        filterByColumn: true,
        filterable: ['name', 'username'],
        listColumns: {
          name: [{
            id: 'ervin',
            text: 'Ervin'
          }, {
            id: 'chelsey',
            text: 'Chelsey'
          }]
        }
    }
  }
});

Answer 1

根据vue-tables-2 documentation：

vue-tables.filter/tableName/FILTER fires off when a filter is changed.

深入了解之后，真的和监听事件一样简单：

Vue 开发人员工具确实使此类问题易于诊断。现在，您想要收听自定义事件。您可以在 Vue documentation.

上学习如何完成此操作

最后，这是一个有效的 fiddle，展示了您如何收听这些事件：https://jsfiddle.net/kbpq5vb3/55/

希望对您有所帮助！

Vue-tables-2 检测应用了哪个过滤器

Vue-tables-2 detecting which filter was applied

javascript

vue.js

vuejs2

vue-tables-2