Javascript 在Dropzone的JS函数中设置vue变量

我有一个页面（在Laravel中），我使用Vue来实现页面的整体功能，并使用axios post来提交表单，但我遇到了一个棘手的情况

我有一个标准的dropzone（使用简单的JS dropzone代码），我在其中放置图像以供上传。当我放置图像时，控制台会记录文件名，这非常正常。问题是我需要将该文件名放入vue代码中的变量对象中

dropzone代码如下所示：

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

但是我的vue代码在这里，我需要使用上一个函数中的文件名设置ImageZoneName

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

      },
........

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

两种方法：

移动dropzone事件配置并将其放在Vue

mounted

lifecycle方法中。然后您可以轻松访问Vue实例以设置变量

newvue({
el:“应用程序”，
数据：{
imageZoneNames:[]，
},
安装的（）{
const vm=这个；
Dropzone.options.imageWithZones={
init:function（）{
此.on（“addedfile”，
函数（文件）{
vm.imageZoneNames.push（file.name）；
}
);
}           
};
}//端装式
})

文件夹：


{{fileName}}

在一个Vue生命周期方法中初始化dropzone，可能是

挂载的

，然后在dropzone函数中设置Vue变量。@StevenB.因此，我非常需要将现有函数插入挂载的方法，而不仅仅是JS函数？