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

我将制表器与vue一起使用。软件包：制表器表格和vue制表器

我试图在制表器行上设置单击事件，但需要访问单击事件中的vue数据变量

脚本如下所示：

从“axios”导入axios；
从“qs”导入qs；
从“vue制表器”导入{tabletorComponent}；
导出默认值{
组成部分：{
名称：“主要”，
CustomerData:TableTorComponent
},
数据（）{
返回{
选项卡：“”，
客户数据：“，
客户：空，
cdata:[
{
f_名称：“”，
l_名称：“
}
],
客户选择：{
行单击：函数（e，行）{
axios
.邮政(
“php/getcustomer.php”，
严格化({
id:row.getCell（“id”）.getValue（）
})
)
。然后（响应=>{
控制台日志（响应）；
})
.catch（错误=>{
console.log（错误）；
});
},
布局：“fitColumns”，
栏目：[
{
标题：“身份证”，
字段：“id”，
排序器：“字符串”，
可见：假，
},
{
标题：“第一”，
字段：“f_名称”，
排序器：“字符串”，
艺术经纬：错，
},
{
标题：“最后”，
字段：“l_名称”，
排序器：“字符串”，
艺术经纬：错，
}
]
}
};
},
方法：{}，
创建（）{
get（“php/getcustomers.php”）。然后（响应=>{
this.cdata=JSON.parse（JSON.stringify（response））.data；
});
}
};您的
行单击
不是一种方法。您需要将其移动到
方法
键下，然后才能访问
此.customer\u数据

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

另外，为什么要在
客户选项
下定义函数。这似乎很奇怪。
Ankit发布的解决方案有效-通过在
方法中定义您的处理程序
处理程序可以访问
此
，它表示您的Vue组件实例（
此
不是针对您问题中定义为匿名函数的处理程序定义的）

其他选项是使用本机Vue事件
Vue制表器
。像这样：



方法：{
在行单击（e，行）{
console.log(
`单击行${row.getCell（“id”）.getValue（）}（${this.tab}）`
);
}
}
rowClick是与其他制表器表格配置一起定义的制表器功能；可能是错误的，但我相信他们需要保持在一起
vue tablator
只是
tablator tables
的包装器，它是表的纯JS组件，通过options对象接收配置
customer\u options
是options对象，这就是为什么在那里定义了handler（它是一个回调制表器，将在行单击时调用）