无法在单元格上打开模式单击

Question

>我正在尝试在cellClick上弹出一个模式。我没有收到任何错误，但它不起作用。该表仍在加载，我的其他函数在cellClick上运行，但不能在模态上运行。我正在使用 Vue、制表器、引导程序。

<script>
  var Tabulator = require('tabulator-tables')
  export default {
    name: 'Test',
    data: function () {
      return {
        modalShow: false,
        tabulator: null, // variable to hold your table
        tableData: [
          {name: 'Billy Bob', age: '12'},
          {name: 'Mary May', age: '1'}
        ] // data for table to display
      }
    },
    watch: {
      // update table if data changes
      tableData: {
        handler: function (newData) {
          this.tabulator.replaceData(newData)
        },
        deep: true
      }
    },
    created: function () {
      console.log('Test', this.$refs)
    },
    mounted () {
      // instantiate Tabulator when element is mounted
      this.tabulator = new Tabulator(this.$refs.table, {
        data: this.tableData, // link data to table
        layout: 'fitColumns',
        columns: [
          {title: 'Name', field: 'name', sorter: 'string', width: 200},
          {title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
        ],
        cellClick: function (e, cell) {
          var name = cell.getRow().getCell('name').getValue()
          var value = cell.getValue()
          var field = cell.getField()
          console.log(name, value, field)
          return {
            modalShow: true
          }
        }
      })
    }
  }
</script>
<template>
  <div ref="table">
    <b-modal v-model="modalShow">Test</b-modal>
  </div>
</template>

Answer 1

用户@dagalti几乎是正确的 - 在他们的示例中，this会引用制表器，因此您必须在我命名为 self 的变量中在提升范围内捕获 Vue 实例。 请参阅下面我对代码的修改。

mounted () {
  var self = this;
  // instantiate Tabulator when element is mounted
  this.tabulator = new Tabulator(this.$refs.table, {
    data: this.tableData, // link data to table
    layout: 'fitColumns',
    columns: [
      {title: 'Name', field: 'name', sorter: 'string', width: 200},
      {title: 'Age', field: 'age', sorter: 'number', align: 'right', formatter: 'progress'}
    ],
    cellClick: function (e, cell) {
      var name = cell.getRow().getCell('name').getValue()
      var value = cell.getValue()
      var field = cell.getField()
      console.log(name, value, field)
      self.modalShow = true;
    }
  })
}