即使使用发射，Vue内联模板也不会触发方法

Question

我想知道我在这里做错了什么，据我所知，这是解决方案：Vue: method is not a function within inline-template component tag

但是该方法仍然没有触发。

  <b-table
      :items="filtered"
      :fields="fields"
      sort-icon-left
      responsive="sm"
      @card-click="setUpdate"
    >
      <template v-slot:head()="data">
        <span class="text-info">{{ data.label.toUpperCase() }}</span>
        <button @click="$emit('card-click', data)">filter</button>
        <input
          v-show="data.field.showFilters"
          v-model="filters[data.field.key]"
          :placeholder="data.label"
        />
      </template>
    </b-table>

  methods: {
    setUpdate(field) {
      console.log("hello");
      console.log(field);
      this._originalField = Object.assign({}, field);
      field.showFilters = true;
    }
  }

更新

所以@click 允许我触发事件，但是这导致表格不会使用 showFilters 更改的数据进行更新。多亏了 MattBoothDev，我发现了基于事件的数据刷新，但是现在奇怪的是，这阻止了数据的变化。 IE。如果 field.showFilters 为 true，如果我单击按钮，则为 true。

 methods: {
    setUpdate(field) {
      this._originalField = Object.assign({}, field);
      field.showFilters = !field.showFilters;
      this.refreshTable();
      console.log(field.showFilters);
    },
    refreshTable() {
      this.$root.$emit("bv::refresh::table", "my-table");
    }
  }

Answer 1

您好像在使用 Bootstrap Vue？

您在这里所做的实际上是在card-click 的<b-table> 标记上放置一个侦听器，但该事件基本上不会发生在<b-table> 的child 组件中。

无论如何，我什至不确定您是否需要该活动。

<button @click="$emit('card-click', data)">filter</button>

很容易就是

<button @click="setUpdate(data)">filter</button>

编辑：

在 Vue.js 中使用 MVVM 也是一种很好的做法。

而不是：@click="$emit('card-click', data)"

应该是：@click="onFilterClicked"

然后：

methods: {
  onFilterClicked (data) {
    this.$emit('an-event', data.some.property)
  }
}

这将使您的代码测试变得更加容易。