vue.js - 无法将事件绑定(bind)到对象方法

Question

我有一个 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 单文件组件错误还是其他原因。

Answer 1

在幕后，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>