如何让replaceData函数工作？

Question

无法使replaceData，setData或updateData生效。使用bootstrap vue和tabulator表。 API工作正常。如果我没有依赖于模态选择的API的url，Tabulator可以工作，但是我需要使用模态选择参数来缩短查询结果。

我试过了：

this.$refs.table.replaceData(equip)
this.$refs.tabulator.replaceData(equip)
this.$refs.tableData.replaceData(equip)
table.replaceData(equip)
tabulator.replaceData(equip)
tableData.replaceData(equip)
table.tableData.replaceData(equip)
tabulator.tableData.replaceData(equip)

问题出在方法> bldgChange下

<script>
var Tabulator = require('tabulator-tables')
export default {
  name: 'Test',
  data: function () {
    return {
      mfgVariants: [
        { mfg: 'mfgA', text: 'mfgA' },
        { mfg: 'mfgB', text: 'mfgB' },
        { mfg: 'mfgC', text: 'mfgC' }
      ],
      modelVariants: [
        { model: 'A1', text: 'A1' },
        { model: 'B1', text: 'B1' },
        { model: 'C1', text: 'C1' }
      ],
      buildingVariants: [
        { text: 'A' },
        { text: 'B' },
        { text: 'C' }
      ],
      locationVariants: [
        { text: 'mechanical' },
        { text: 'electrical' }
      ],
      classVariants: [
        { text: 'breaker' },
        { text: 'pump' },
        { text: 'generator' }
      ],
      catVariants: [
        { text: 'high' },
        { text: 'low' },
        { text: 'gas' },
        { text: 'diesel' },
        { text: 'big' },
        { text: 'small' }
      ],
      tabulator: null,
      tableData: [
        {}
      ]
    }
  },

方法

  methods: {
    mfgChange: function () {
      console.log(this.selected)
    },
    bldgChange: function () {
      console.log(this.selected)
      var parameter = this.selected
      var url = 'https://izk7c37zb3.execute-api.us-east-1.amazonaws.com/latest?Building=' + parameter
      console.log(url)
      fetch(url)
        .then(function (response) {
          return response.json()
        })
        .then(function (json) {
          var equip = json.recordset
          this.tabulator.replaceData(equip)
        })
    },
    showTable: function () {
      console.log('ok pressed')
    }
  },

表

  watch: {
    // update table if data changes
    tableData: {
      handler: function (newData) {
        this.tabulator.replaceData(newData)
      }
    },
    deep: true
  },
  created: function () {
    console.log('Page Loaded', this.$refs)
  },
  mounted () {
    var bldgModalRef = this.$refs.bldgModalRef
    bldgModalRef.show()
    // instantiate tabulator
    var locModalRef = this.$refs.locModalRef
    var myModalRef = this.$refs.myModalRef
    var catModalRef = this.$refs.catModalRef
    this.tabulator = new Tabulator(this.$refs.table, {
      data: this.tableData,
      layout: 'fitColumns',
      columns: [
        { title: 'Equipment', field: 'itemid', headerFilter: 'input' },
        { title: 'Manufacturer', field: 'mfg', headerFilter: 'input' },
        { title: 'Model', field: 'model', headerFilter: 'input' },
        { title: 'Class', field: 'class', headerFilter: 'input' },
        { title: 'Category', field: 'category', headerFilter: 'input' },
        { title: 'Description', field: 'description', headerFilter: 'input' },
        { title: 'Location', field: 'location', headerFilter: 'input' },
        { title: 'Building', field: 'building', headerFilter: 'input' }
      ],
      cellClick: function (e, cell) {
        var column = cell.getField()
        var value = cell.getValue()
        var name = cell
          .getRow()
          .getCell('itemid')
          .getValue()
        console.log(name, column, value)
        if (column === 'mfg' || column === 'model') {
          myModalRef.show()
        } else if (column === 'itemid') {
          alert(column + ' cannot be changed.')
        } else if (column === 'description') {
          alert(
            column + ' is now automatically generated and cannot be changed.'
          )
        } else if (column === 'building' || column === 'location') {
          locModalRef.show()
        } else if (column === 'class' || column === 'category') {
          catModalRef.show()
        } else {
          alert(column + ' clicked')
        }
      }
    })
  }
}
</script>

模板

<template>
  <div>
    <b-modal ref="bldgModalRef" v-model="modalShow" title="Buildings" @ok="showTable">
      <b-container fluid>
        <b-col>
          Building(s)
          <b-row>
            <b-form-select ref="bldg" v-model="selected" v-on:change="bldgChange" :options="buildingVariants" />
          </b-row>
        </b-col>
      </b-container>
    </b-modal>
    <b-modal ref="myModalRef" title="Manufacturer and Model">
      <b-container fluid>
        <b-col col="2">
          Manufacturer
          <b-row>
            <b-form-select ref="mfg" v-model="selected" :change="mfgChange" :options="mfgVariants" />
          </b-row>
        </b-col>
        <b-col col="2">
          Model
          <b-row>
            <b-form-select ref="model" :options="modelVariants"/>
          </b-row>
        </b-col>
      </b-container>
    </b-modal>
    <b-modal ref="locModalRef" title="Building and Location">
      <b-container fluid>
        <b-col>
          Building
          <b-row>
            <b-form-select
              ref="building"
              v-model="selected"
              v-on:change="buildingChange"
              :options="buildingVariants"
            />
          </b-row>
        </b-col>
        <b-col>
          Location
          <b-row>
            <b-form-select ref="location" :options="locationVariants"/>
          </b-row>
        </b-col>
      </b-container>
    </b-modal>
    <b-modal ref="catModalRef" title="Class and Category">
      <b-container fluid>
        <b-col>
          Class
          <b-row>
            <b-form-select
              ref="class"
              v-model="selected"
              v-on:change="buildChange"
              :options="classVariants"
            />
          </b-row>
        </b-col>
        <b-col>
          Category
          <b-row>
            <b-form-select ref="category" :options="catVariants"/>
          </b-row>
        </b-col>
      </b-container>
    </b-modal>
    <div ref="table"></div>
  </div>
</template>

Answer 1

    bldgChange: function () {
      console.log(this.selected)
      this.tabulator.parameter = this.selected
      fetch('<API-URL>?Building=' + this.selected)
        .then(response => response.json())
        .then(json => this.tabulator.setData(json.recordset))
    },