Не могу открыть модальный на cellClick - PullRequest
Новая
       18

Не могу открыть модальный на cellClick

0 голосов
/ 23 марта 2019

Я пытаюсь заставить модал всплывать на cellClick. Я не получаю никаких ошибок, но это не работает. Таблица все еще загружается, и другие мои функции выполняются на cellClick, но не на модальной. Я использую Vue, Tabulator, bootstrap. 

<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>

1 Ответ

0 голосов
/ 25 марта 2019

Пользователь @dagalti почти верен - в их примере this будет ссылаться на Tabulator, поэтому вам нужно захватить экземпляр Vue в расширенной области видимости в переменной, которую я назвал self.Смотрите мои модификации вашего кода ниже. 

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;
    }
  })
}
...