这个。在 dropzone 成功回调 vuejs2 中未定义

Question

我正在使用 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>

错误是：

Uncaught TypeError: Cannot set property 'name' of undefined

我尝试了找到的解决方案，但仍然无法正常工作。

Answer 1

这根本行不通，因为 this 绑定到的对象超出您的想象。这是人们切换或学习的一些默认错误 JavaScript。

dropOptions 是一个对象。 success 函数中的 this 指的是 dropOptions 对象而不是它的父对象。

所以 dropOptions 没有字段 data 因此是 undefined 并且您无法访问 name.

参见：access parent object in javascript

编辑：为了进一步调查，请提供一些代码，说明您对发布的 link 所做的操作。这似乎朝着正确的方向发展，但从一个简单的 "does not work" 来看，我们无法告诉您还需要记住什么。

Answer 2

看着 documentation，你用错了。

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

您需要使用 vue-2-dropzones events，在您的情况下 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
  }
}

这个。在 dropzone 成功回调 vuejs2 中未定义

this. undefined inside dropzone success callback vuejs2

javascript

dropzone.js

vuejs2