如何在制表符选项中访问 vue 数据变量或方法

Question

我在 vue 中使用制表符。软件包：tabulator-tables 和 vue-tabulator.

我正在尝试在制表符行上设置点击事件，但需要在点击事件中访问 vue 数据变量。

脚本如下所示：

  

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

如何从 "rowClick" 事件处理程序中访问 vue 变量 "customer_data"？

Answer 1

您的 rowClick 不是方法。您需要将其移动到 methods 键下，然后您可以访问 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
  }
}

另外，为什么要在customer_options下定义一个函数。好像很奇怪。

Answer 2

Ankit 发布的解决方案有效——通过在 methods 中定义你的处理程序，处理程序可以访问代表你的 Vue 组件实例的 this（this 没有为定义为匿名的处理程序定义功能与您的问题相同）。

其他选项是使用原生 Vue 事件 vue-tabulator provides。像这样：

<TabulatorComponent v-model="cdata" :options="customer_options" @row-click="onRowClick"/>

methods: {
    onRowClick(e, row) {
     console.log(
            `Clicked on row ${row.getCell("id").getValue()} (${this.tab})`
          );
    }
  }

如何在制表符选项中访问 vue 数据变量或方法

how to access vue data variables or methods within tabulator options

javascript

vue.js

tabulator