如何从 Uppy 的回调事件中访问 "this"

Question

我正在使用 Uppy Vue 组件库，并且在 docs 之后，我通过将它添加为计算属性.

来初始化 Uppy

computed: {
    uppy: () => new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    }),
}

我正在尝试使用 Uppy complete event 更新我的 Vue 组件的数据，但未定义“this”。我不太确定如何从这里访问“this”。

知道怎么做吗？

更新

发布这篇文章后，我找到了一个有效的解决方案。我对这个解决方案犹豫不决，因为它看起来太简单了。

如果没有人提供更好的解决方案，我会添加这个作为答案。

// Uppy Instance
uppy: function() {
    return new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    })
},

Answer 1

通过遵循 Uppy 文档并使用箭头函数实例化 Uppy 实例，this 似乎不再引用 Vue.这使得访问 this.method() 或 this.variable 等不再有效。

我的解决方案是将 Uppy 实例化从箭头函数更改为常规函数。我相信这会导致 this 引用全局实例，但我对 this 没有充分的理解，所以请对我所说的持保留态度。

我改变了这个：

computed: {
    uppy: () => new Uppy()
}

为此：

computed: {
    uppy: function() { return new Uppy() }
}

如何从 Uppy 的回调事件中访问 "this"

How to access "this" from Uppy's callback event

this

vue.js

uppy