Styjun

I'm trying to get a modal to pop up on cellClick. I'm not getting any errors, but it's not working. The table still loads and my other functions run on cellClick, but not the modal. I'm using 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>

User @dagalti is almost correct - in their example, this would refer to Tabulator, so you have to capture the Vue instance at an elevated scope, in a variable I have named self. See my modifications to your code, below.

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