Javascript和VueJS变量访问

Question

我想从successDropzone事件回调中访问VueJS变量.所有代码都可以,DropzoneJS和VueJS可以很好地协同工作,但是photos在成功回调中无法访问我的变量.

这是我的脚本的简单实现:

<script>
    import Dropzone from 'dropzone';

    export default {  
        data() {
            return {
                photos: []
            };
        },

        ready() {
            Dropzone.autoDiscover = false;

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

                    this.photos = response.data.photos;

                    // this.photos is not accessible here

                }
            });
        }
    }
</script>

有这种方式访问​​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

        }
    });
}