Vue js bootstrap 单击按钮后开始过滤

Question

单击按钮后如何触发搜索过滤器？我不想过滤有人在搜索栏中输入的每种类型。我想在他们单击“立即搜索”按钮后触发搜索。

<b-table
                        id="table-transition-example"
                        :busy.sync="loading"
                        :items="myProvider"
                        :fields="fields"
                        :current-page="currentPage"
                        :per-page="perPage"
                        striped
                        small
                        primary-key="user_id"
                        :filter="filter"
                        :sort-by="sortBy"
                        :sort-desc="sortDesc"
                        >

只要有人在搜索栏中输入此代码，就会自动搜索 table。

如果我创建自定义事件，是否可以以某种方式附加 :filter 属性？或者还有其他想法吗？

Answer 1

将不同的数据属性绑定到您的输入，并创建一个方法，将您输入的值分配给您的 filter 属性。

粗略示例：

<input v-model="filterInput">
<button @click="applyFilter">Search now</button>

<b-table :filter="filterTable"></b-table>

<script>
data() {
  return {
    filterInput: '',
    filterTable: ''
  }
},
methods: {
  applyFilter() {
    this.filterTable = this.filterInput
  }
}
</script>

Vue js bootstrap 单击按钮后开始过滤

Vue js bootstrap start filtering once button is clicked

vuejs2

bootstrap-vue