Question

我想从ng- Dropzone事件回调中访问VueJS变量。所有的代码都没问题，DropzoneJS＆amp; VueJS可以很好地协同工作，但是在成功回调中无法访问我的变量success。

以下是我的脚本的简单实现：

photos

是否有以这种方式访问VueJS组件变量的最佳做法？感谢

Answer 1

您目前正在采取的方式，this引用可能存在范围问题。

我建议在this实例化之外重新分配Dropzone，然后像这样使用...

ready() {
    Dropzone.autoDiscover = false;

    const self = this;

    new Dropzone('form#upload-form', {
        url: '...',
        success: function(file, response) {

            self.photos = response.data.photos;

            // this.photos is not accessible here

        }
    });
}

Answer 2

在您的代码中存在一个范围问题＆＃39;这个＆＃39;参考。我建议使用箭头功能，以便这个＆＃39;这个＆＃39;是vue实例的那个。成功函数可以这样写： -

ready() {
    Dropzone.autoDiscover = false;
    new Dropzone('form#upload-form', {
        url: '...',
        success: (file, response) => {
           this.photos = response.data.photos;
        }
    });
}

箭头功能是ES2015的一部分。您需要babel将您的代码编译为适用于所有浏览器的兼容版本。您可以参考此site了解兼容性问题

希望这有帮助！

Answer 3

使用箭头功能，您可以成功访问Vue实例的“ this”。

success: (filem response) => {
  this.photos = ..
}

Javascript＆amp; VueJS变量访问

3 个答案: