Javascript & VueJS变量访问
Javascript & VueJS变量访问
提问于 2017-03-02 14:35:55
我想从VueJS Dropzone事件回调中访问一个success变量。所有代码都很好，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组件变量的最佳实践？谢谢
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-03-02 14:51:07
按照当前的做法，您可能对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
}
});
}Stack Overflow用户
发布于 2017-08-24 11:13:06
在您的代码中，“this”引用有一个作用域问题。我建议使用箭头函数，这样'this‘的范围就是vue实例的作用域。成功函数可以这样写成：-
ready() {
Dropzone.autoDiscover = false;
new Dropzone('form#upload-form', {
url: '...',
success: (file, response) => {
this.photos = response.data.photos;
}
});
}箭头函数是ES2015的一部分。您需要babel将您的代码编译成适用于所有浏览器的兼容版本。您可以引用此站点以解决兼容性问题。
希望这能有所帮助！
Stack Overflow用户
发布于 2018-11-05 07:48:39
使用箭头函数，您就可以在成功内部访问Vue实例的"this“。
success: (filem response) => {
this.photos = ..
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42558252
复制相关文章
相似问题
腾讯云开发者
