[英]this. undefined inside dropzone success callback vuejs2
I am using Dropzone.js with Vuejs2. 我正在将Dropzone.js与Vuejs2一起使用。 The file upload is working fine however, inside the
success
callback function i cannot assign the response to an object of the parent. 文件上传工作正常,但是,在
success
回调函数内部,我无法将响应分配给父对象。
Here is a sample of my implementation: 这是我的实现示例:
<script>
import vueDropzone from "vue2-dropzone";
export default {
components: {
vueDropzone
},
props: {
},
data: () => ({
data: {
name: ''
},
dropOptions: {
url: "https://httpbin.org/post",
maxFileSize: 10,
autoProcessQueue: false,
success: (file, response) => {
if (response.message == "success"){
this.data.name = response.name;
this.add();
}
else{
console.log('Error Uploading file');
}
}
}),
};
</script>
the error is: 错误是:
Uncaught TypeError: Cannot set property 'name' of undefined
未捕获的TypeError:无法设置未定义的属性“名称”
I tried the solutions found Here but its still not working. 我尝试了在这里找到的解决方案,但仍然无法正常工作。
Looking at the documentation , you're using it wrong. 查看文档 ,您使用的是错误的。
dropOptions
should only contain it's configuration , not the events. dropOptions
应该只包含它的配置 ,而不是事件。
You need to use the vue-2-dropzones events , in your case vdropzone-success(file, response)
, so: 您需要使用vue-2-dropzones 事件 ,在您的情况下是
vdropzone-success(file, response)
,所以:
<vue-dropzone
ref="myVueDropzone"
id="dropzone"
:options="dropOptions"
v-on:vdropzone-success="someSuccessMethod">
</vue-dropzone>
...
data() { /* ... */ },
methods: {
someSuccessMethod(file, response) {
// your logic
}
}
This simply does not work because this
is binded to another object than you think. 这根本行不通,因为
this
绑定到了您想不到的另一个对象上。 It is some default error from people switching or learning JavaScript. 这是人们切换或学习JavaScript时的一些默认错误。
dropOptions
is an object. dropOptions
是一个对象。 this
in the success
functions refers to the dropOptions
object and not to the parent object of it. this
在success
的功能是指dropOptions
对象,而不是它的父对象。
So dropOptions
has no field data
hence is undefined
and you can not access name
. 因此
dropOptions
没有字段data
因此是undefined
,您不能访问name
。
See: access parent object in javascript 请参阅: 使用javascript访问父对象
EDIT: For further investigation, please provide some code of what you have done with the link you posted. 编辑:为进一步调查,请提供一些有关您发布的链接的内容的代码。 This seems to go to the right direction but from a simple "does not work", we can not tell you what else you need to keep in mind.
这似乎是朝着正确的方向前进,但从简单的“不起作用”来看,我们无法告诉您还需要记住什么。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.