如何从 watch 调用这些 BootstrapVue 组件方法？

Question

我有一个 BootstrapVue table，在单个 HTML 文件中包含以下代码；

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
    unchecked-value="not_enabled">
    Filter
  </b-form-checkbox>

  <b-input v-model="filter" placeholder="Filter table..."></b-input>
  <hr />
  <b-table :items="items" :filter="filter" :filter-function="filterFn">
  </b-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        filter: "",
        enable_filter: "enabled",
        items: [
          { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
          { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
          { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
          { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
          { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
        ]
      }
    },
    methods: {
      normalizeString(s) {
        return `${s}`.trim().toLowerCase();
      },
      filterFn(row) {
        console.log("filterFn()");
        let filtered_result = true;
        if (this.enable_filter === "enabled") {
          filtered_result = this.filter.split(',')
            .map(this.normalizeString)
            .some(
              term => Object.values(row)
                .map(this.normalizeString)
                .some(
                  val => val.indexOf(term) > -1
                )
            );
        }

        return filtered_result;
      },
      test_func()
      { 
        console("test_func()");        
      },
    },
    watch: {
      enable_filter()
      {
        console.log("watch checkbox filter");
        this.test_func();
        this.filterFn();
      },
  },    
  })
</script>

table 看起来像这样；

单击 Search 复选框时，watch 中的 enable_filter() 将为运行。问题是如何在 enable_filter() 中调用其他方法，例如 test_func() 和 filterFn(row)？我确实尝试调用这些方法，但看不到 console.log() 的输出。我做对了吗？

我正在使用 BootstrapVue 和 vue.js v2.6

Answer 1

您的方法应该会被调用。阅读您收到的错误消息。它可能会说类似

TypeError: console is not a function

因为console不是函数

test_func()
{ 
  console("test_func()");        
},

你可能想要console.log

Answer 2

请检查以下代码片段（您可以检查过滤器是否已启用并且是否为空）:)

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div id="app" class="p-5">
  <b-form-checkbox id="checkbox-filter" v-model="enable_filter" name="checkbox-filter" value="enabled"
    unchecked-value="not_enabled">
    Filter
  </b-form-checkbox>

  <b-input v-model="filter" placeholder="Filter table..."></b-input>
  <hr />
  <b-table :items="items" :filter="filter" :filter-function="filterFn">
  </b-table>
</div>

<script>
  new Vue({
    el: '#app',
    data() {
      return {
        filter: "",
        enable_filter: "enabled",
        items: [
          { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
          { id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
          { id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
          { id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
          { id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
        ]
      }
    },
    methods: {
      normalizeString(s) {
        return `${s}`.trim().toLowerCase();
      },
      filterFn(row) {
        
        if (this.enable_filter === "enabled") {
        console.log("filterFn()", this.enable_filter);
          let filtered_result = true;
          if (this.enable_filter === "enabled" && this.filter) {
            filtered_result = this.filter.split(',')
              .map(this.normalizeString)
              .some(
                term => Object.values(row)
                  .map(this.normalizeString)
                  .some(
                    val => val.indexOf(term) > -1
                  )
              );
          }
          return filtered_result;
        }
      },
      test_func()
      { 
        console.log("test_func()");        
      },
    },
    watch: {
      enable_filter()
      {
        console.log("watch checkbox filter");
        this.test_func();
        this.filterFn();
      },
  },    
  })
</script>

如何从 watch 调用这些 BootstrapVue 组件方法？

How to call these BootstrapVue component methods from watch?

javascript

vue.js

vuejs2

bootstrap-vue