Javascript & VueJS 变量访问

Question

我想从 success Dropzone 事件回调访问 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 参考可能存在范围界定问题。

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

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

在您的代码中，'this' 引用存在范围界定问题。我建议使用箭头函数，这样 'this' 的范围就是 vue 实例的范围。成功函数可以这样写：-

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

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

希望对您有所帮助！

Answer 3

使用箭头函数就可以成功访问"this" Vue实例

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

Javascript & VueJS 变量访问

Javascript & VueJS variable access

javascript

dropzone.js

vue.js