在 JS function 中为 Dropzone 设置 vue 变量

Question

我有一个页面（在 Laravel 中），我在其中使用 Vue 来处理页面的整体 function 和最终的 axios 帖子来提交表单，但我遇到了一个棘手的情况。

我有一个标准的 dropzone（使用普通的 JS dropzone 代码），我在其中删除要上传的图像。 当我删除图像时，我有控制台记录文件名，它工作得很好。 问题是我需要将该文件名放入我的 vue 代码中的变量 object 中。

dropzone代码是这样的：

Dropzone.options.imageWithZones = {
        init: function() {
            this.on("addedfile", 
                function(file) { 
                    console.log(file.name);
            });
        }           
    };

但是我的vue代码在这里，我需要用之前function的文件名设置ImageZoneName

new Vue({
      components: {
        Multiselect: window.VueMultiselect.default
      },
      el: "#commonDiv",
      data() {
        return{
            ImageZoneName: [],
            
        }

      },
........

简单地获取文件名（将文件添加到 dropzone 时）并将 vue ImageZoneName object 设置为该文件名的值的最佳方法是什么？

Answer 1

两种方式：

1. 移动 dropzone 事件配置并将其放在 Vue mounted的生命周期方法中。 然后您可以轻松访问 Vue 实例来设置变量。

 new Vue({ el: "#app", data: { imageZoneNames: [], }, mounted() { const vm = this; Dropzone.options.imageWithZones = { init: function() { this.on("addedfile", function(file) { vm.imageZoneNames.push(file.name); } ); } }; } // end mounted })

 <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> Files: <ul> <li v-for="fileName in imageZoneNames":key="fileName"> {{ fileName }} </li> </ul> <form action="/file-upload" class="dropzone" id="imageWithZones"></form> </div>

2. 将实例分配给变量并通过该变量访问数据

 const vm = new Vue({ el: "#app", data: { imageZoneNames: [], }, }) Dropzone.options.imageWithZones = { init: function() { this.on("addedfile", function(file) { vm.imageZoneNames.push(file.name) } ); } };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/dropzone.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> <div id="app"> Files: <ul> <li v-for="fileName in imageZoneNames":key="fileName"> {{ fileName }} </li> </ul> <form action="/file-upload" class="dropzone" id="imageWithZones"></form> </div>