Utilizing tabulator in conjunction with vue using the following packages: tabulator-tables and vue-tabulator.
In an attempt to implement a click event on the tabulator row, I am faced with the challenge of accessing vue data variables within the scope of this event.
Here is a snippet of the script:
import axios from "axios";
import qs from "qs";
import { TabulatorComponent } from "vue-tabulator";
export default {
components: {
name: "Main",
CustomerData: TabulatorComponent
},
data() {
return {
tab: "",
customer_data: "",
customers: null,
cdata: [
{
f_name: "",
l_name: ""
}
],
customer_options: {
rowClick: function(e, row) {
axios
.post(
"php/getcustomer.php",
qs.stringify({
id: row.getCell("id").getValue()
})
)
.then(response => {
console.log(response);
//Accessing vue variable 'customer_data' here would be beneficial
})
.catch(error => {
console.log(error);
});
},
layout: "fitColumns",
columns: [
{
title: "ID",
field: "id",
sorter: "string",
visible: false,
},
{
title: "First",
field: "f_name",
sorter: "string",
editor: false,
},
{
title: "Last",
field: "l_name",
sorter: "string",
editor: false,
}
]
}
};
},
methods: {},
created() {
axios.get("php/getcustomers.php").then(response => {
this.cdata = JSON.parse(JSON.stringify(response)).data;
});
}
};Is there a way to access the vue variable "customer_data" within the "rowClick" event handler?