我有一个 vue 单文件组件,它有一个自定义类实例作为属性:现在我想将一个事件绑定(bind)到此类实例的一个方法,但我遇到了问题,我的代码文件有一个简化版本
VueJS单文件组件
<template>
<div @click="class_prop.method"></div>
</template>
export default {
data() {
return {
class_prop: new CustomClass(),
};
},
}
自定义类
class CustomClass {
constructor(){
this.prop = 'default_value';
}
method(){
this.prop = 'new_value';
console.log(this.prop);
}
}
错误
单击页面元素时出现此错误:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'prop' of null"
但是当我尝试从浏览器控制台调用自定义类方法时(我正在使用带有 Vue Devtools 扩展的 Chrome)我没有收到任何错误,它工作正常:
$vm0.class_prop.method()
由于我的代码有两种不同的行为,所以我无法判断是我的类错误、vue 单文件组件错误还是其他原因。
最佳答案
在幕后,Vue 以某种方式 使用 null
调用或应用了您的方法。因此,您提到的错误:
Error in v-on handler: "TypeError: Cannot read property 'prop' of null"
如何解决该问题?
您可以使用 lambda 表达式,这样您就可以完全控制方法
的对象所有者,如下所示:
<div @click="() => class_prop.method()"></div>
您还可以在这样的方法中使用类实例:
export default {
data: () => ({
foo: new CustomClass(),
}),
methods: {
bar() {
this.foo.method();
},
},
}
然后在你的模板中:
<div @click="bar">{{ foo.prop }}</div>
关于vue.js - 无法将事件绑定(bind)到对象方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65395852/