in Education by
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. 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 } } }) } }
Test
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

1 Answer

0 votes
by
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; } }) }

Related questions

0 votes
    Tell me how to make it so that when you click on a button from a cycle with page numbers, this ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    recently I started to work on Vue js and I want to use a javascript plugin like Isotope also I ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 13, 2022 in Education by JackTerrance
0 votes
    I am developing a single-page-application using vue-cli3 and npm. The problem: Populating a basic integer ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 7, 2022 in Education by JackTerrance
0 votes
    I have two functions in my store, one that gets data by calling API and one that toggles change ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 6, 2022 in Education by JackTerrance
0 votes
    I am developing a single-page-application using vue-cli3 and npm. The problem: Populating a basic integer ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 24, 2022 in Education by JackTerrance
0 votes
    I have set up Vue so that I have a top level AppLayout component which just includes a Navigation Menu ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 20, 2022 in Education by JackTerrance
0 votes
    Basically I need to add the script to the head of my index.html, so what I've tried is... in ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 12, 2022 in Education by JackTerrance
0 votes
    Basically I need to add the script to the head of my index.html, so what I've tried is... in ... , JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 10, 2022 in Education by JackTerrance
0 votes
    I have some wizard-like pages in my application, its keeping state while navigating between small steps, the ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Feb 19, 2022 in Education by JackTerrance
0 votes
    after installing composer I tried to install larvel but it gives ErrorException .please help.... data from ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 30, 2022 in Education by JackTerrance
0 votes
    after installing composer I tried to install larvel but it gives ErrorException .please help.... data from ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Jun 23, 2022 in Education by JackTerrance
0 votes
    In my macbook air terminal I wrote python eggshell.py but I got this error python: can't open ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 9, 2022 in Education by JackTerrance
0 votes
    I have a Bootstrap modal dialog which contains a form. The modal dialog contains a submit and a cancel ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 2, 2022 in Education by JackTerrance
0 votes
    I have three components - app, sideNav and wallForm. In the app header, I have a button that ... JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked May 10, 2022 in Education by JackTerrance
0 votes
    I have an AbsoluteLayout with a Frame and a Notification. The problem is when I use this.$showModal(.. ... Questions for Interview, JavaScript MCQ (Multiple Choice Questions)...
asked Apr 21, 2022 in Education by JackTerrance
...