how to access vue data variables or methods within tabulator options

Question

I am using tabulator with vue. Packages: tabulator-tables and vue-tabulator.

I'm trying to set a click event on the tabulator row, but need to access the vue data variables within the click event.

The script looks like this:

  

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

The how do I access the vue variable "customer_data" from within the "rowClick" event handler?

Answer 1

Your rowClick is not a method. You need to move it under the methods key and then you can access this.customer_data.

// ...Rest of the code
customer_options: {
   rowClick: this.rowClick
},
// Rest of the data
methods:{
  rowClick(e, row){
     // Do your thing with this.customer_data
  }
}

Also, why are you defining a function under customer_options. It seems weird.