javascript - 如何在制表符选项中访问 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”？

标签： javascriptvue.jstabulator

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. 这似乎很奇怪。