如何從手表中呼叫這些BootstrapVue組件方法？

我在一個 HTML 檔案中有一個帶有以下代碼的 BootstrapVue 表；

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>

表格如下所示；

Search單擊復選框時，將運行enable_filter()內部。watch問題是我如何呼叫其他方法，例如test_func()and filterFn(row)inside enable_filter()？我確實嘗試呼叫這些方法，但我看不到 console.log() 的輸出。我做對了嗎？

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

uj5u.com熱心網友回復：

請檢查以下代碼段（您可以檢查過濾器是否已啟用并且是否為空）:)

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>

uj5u.com熱心網友回復：

你的方法應該被呼叫。閱讀您收到的錯誤訊息。它可能會說類似

TypeError: console is not a function

因為console不是函式

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

你可能想要console.log

標籤：javascript Vue.js Vuejs2 引导程序

上一篇：匹配時-分-秒(hms)持續時間字串

下一篇：用亂數填充向量