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;
    }
  }

Answer 1

似乎您正在使用Bootstrap Vue？

[您实际上在这里所做的是在<b-table>的card-click标记上放置一个侦听器，但该事件实际上不在<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)
  }
}

这将使测试代码容易得多。