vue-tables-2 — 来自自定义过滤器的 $emit 没有使其回调？答案

【问题标题】：vue-tables-2 — $emit from custom filter not making it to callback?vue-tables-2 — 来自自定义过滤器的 $emit 没有使其回调？
【发布时间】：2020-10-24 14:14:12
【问题描述】：

我正在努力在 vue-tables-2 中获取自定义过滤器，以从 Vue 中的嵌套单页组件发出事件。问题可能是我没有在上游正确捕获/处理它。

我在dataTable 的自定义模板中有一个自定义过滤器<filter-brand />，它发出Event.$emit("vue-tables.filter::filterByBrand", this.brand)。

我想在名为<Grid /> 的顶级路由器组件中捕获此“filterByBrand”事件，这是我的<v-client-table /> 以及包括我的customFilters 在内的服务选项。

对我偏离轨道的地方有什么想法吗？

Grid.vue

...
customFilters: [
  {
    name: "filterByBrand",
    callback: function(row, query) {
      console.log("filter=", query); // nothing?
      return row.name[0] === query;
    },
  },
],
...

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { ClientTable, Event } from "vue-tables-2";
import "./scss/index.scss";

Vue.use(ClientTable, {}, false, "bootstrap4", {
  filtersRow: FiltersRow,
  genericFilter: FilterKeyword,
  sortControl: SortControl,
  tableHeading: TableHeading,
  dataTable: DataTable, // in which resides my custom filter <filter-brand />
});

Vue.use(Event);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount("#app");

FilterBrand.vue

<template>
  <div class="form-group position-relative">
    <label for="brandFilter">
      Brand:
    </label>
    <select
      name="brandFilter"
      id="brandFilter"
      class="form-control select"
      @change="handleChange($event)"
      v-model="brand"
    >
      <option disabled selected value="">Choose</option>
      <option value="All">All</option>
      <option value="Brand 1">Brand 1</option>
      <option value="Brand 2">Brand 2</option>
    </select>
  </div>
</template>
<script>
import { Event } from "vue-tables-2"; // if I don't import here, Event below is "window" event.

export default {
  name: "FilterBrand",
  props: ["props"],
  data() {
    return {
      brand: "",
    };
  },
  methods: {
    handleChange(event) {
      this.brand = event.target.value;
      Event.$emit("vue-tables.filter::filterByBrand", this.brand); // where is this going?? :)
    },
  },
};
</script>

【问题讨论】：

标签： javascript vue.js events vuejs2 vue-tables-2

【解决方案1】：

import {ClientTable, Event} from 'vue-tables-2';
Vue.use(ClientTable, {}, false, 'bootstrap4');
window.vtEvent = Event; //make new name for vue-table-2 event

然后在这样的组件上使用：

vtEvent.$emit('vue-tables.filter::filterprodusen', value);

希望这会有所帮助..

【讨论】：

谢谢 - 我以前也试过，import { Event as VtEvent } from ... 但我认为我在其他地方做错了。

【解决方案2】：

我的错误是我的主 Grid.vue 文件中有 customFilters 块在options: {}块之外。

所以这个：

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
    },
    customFilters: [
      {
        name: "filterByBrand",
        callback: function (row, query) {
          return row.brand === query;
        },
      },
    ],
  };
},

应该是这样的：

data() {
  return {
    brandEventCount: 0,
    columns: [],
    eventsData: [],
    options: {
      columnsDropdown: true,
      perPage: 25,
      debounce: 500,
      customFilters: [
        {
          name: "filterByBrand",
          callback: function (row, query) {
            return row.brand === query;
          },
        },
      ],
    },
  };
},

【讨论】：