Vuejs2 Vue.js：在内联事件处理程序中使用数据对象的方法

我有一个Vue2.5+组件，在其中我将数据属性设置为一个新的Foo对象。在click处理程序中使用foo.bar可以正确调用该方法，但会引发未捕获的TypeError：在尝试修改foo类内的属性时，无法将属性“someVariable”设置为null。将其设置为Foo是一个对象文本而不是一个类也不能解决该错误

我怀疑在组件和类之间发生了一些奇怪的事情

Vue组件 但是，如果我将vue组件更改为通过其自己的methods属性引用外部方法，则它可以工作

Vue组件工作 如评论中所述，foo.bar不附带任何上下文：

在JS中，函数是对象，就像任何对象一样，它们有自己的指针。 在对其主体的求值中，该对象绑定到一个称为上下文的特定对象，该对象是自动设置的默认上下文或用户定义的手动设置

JS中的继承是通过一个类来实现的，并且应该在类的原型上定义/附加方法。因此，当您调用foo.bar时：

您处于方法调用上下文中，因此foo将绑定到该方法 首先在对象上搜索条，然后在原型链中搜索条 但是方法的行为与任何其他属性一样：当您执行foo.bar时，您将获得对实际方法的引用，这是方法的未绑定函数默认行为，因为它在对象上调用时是绑定的

因此，在这种情况下，您真正需要做的是foo.bar.bindfoo

---

我还建议快速查看它的实现，并将其作为一个函数，它允许传递：：foo.bar而不是foo.bar。bindfoo

foo.bar是一个没有任何上下文连接的函数，如您的问题所示，绑定上下文或委托上下文难道上下文不是组件吗？这里您打算做的是foo.bar.bindfoo.谢谢。请你详细说明为什么必须这样做，并解释更多的背景？如果你以回复的形式发布，我可以接受。

import Foo from './foo.js'
export default {
    template: `<div @click="foo.bar"></div>`,
    data() {
        return {
            foo: new Foo()
        }
    },
    created() {
        console.log(foo); // foo is not null here
    }
}

export default class Foo
{
    constructor()
    {
        this.someVariable = 0;
    }

    bar(e)
    {
        // modify this.someVariable
    }
}

import Foo from './foo.js'
export default {
    template: `<div @click="bar"></div>`,
    data() {
        return {
            foo: new Foo()
        }
    },
    methods: {
        bar(e) {
            this.foo.bar(e);
        }
    }
}