Javascript 这未定义的dropzone内部成功回调vuejs2

我正在将Dropzone.js与Vuejs2一起使用。文件上传工作正常，但是在

success

回调函数中，我无法将响应分配给父对象

以下是我的实现示例：

<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>

从“vue2 dropzone”导入vueDropzone；
导出默认值{
组成部分：{
vueDropzone
},
道具：{
},
数据：（）=>({
数据：{
名称：“”
},
删除选项：{
url:“https://httpbin.org/post",
最大文件大小：10，
自动处理队列：false，
成功：（文件、响应）=>{
如果（response.message==“成功”）{
this.data.name=response.name；
这个。添加（）；
}
否则{
log（“上传文件时出错”）；
}
}
}),
};

错误是：

未捕获的TypeError:无法设置未定义的属性“name”

---

我尝试了找到的解决方案，但仍然不起作用。

这根本不起作用，因为

此

绑定到了另一个对象，超出了您的想象。这是人们切换或学习JavaScript时的默认错误

dropOptions

是一个对象。

在
success
函数中，此

指的是

dropOptions

对象，而不是它的父对象

因此

dropOptions

没有字段

数据

，因此

未定义

，您无法访问

名称

见：

编辑：为了进一步调查，请提供一些代码，说明您对所发布链接所做的操作。这似乎是正确的方向，但从一个简单的“不起作用”，我们无法告诉您还需要记住什么。

查看链接，您用错了

dropOptions

应该只包含它的，而不是事件

您需要使用vue-2-dropzones，在您的情况下

vdropzone成功（文件，响应）

，因此：

<vue-dropzone
  ref="myVueDropzone"
  id="dropzone"
  :options="dropOptions"
  v-on:vdropzone-success="someSuccessMethod">
</vue-dropzone>

...
data() { /* ... */ },
methods: {
  someSuccessMethod(file, response) {
    // your logic
  }
}

...
数据（）{/*…*/}，
方法：{
someSuccessMethod（文件、响应）{
//你的逻辑
}
}