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

【问题标题】：setting a vue variable within a JS function for Dropzone在 Dropzone 的 JS 函数中设置 vue 变量
【发布时间】：2020-07-06 21:19:18
【问题描述】：

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

我有一个标准的拖放区（使用普通的 JS 拖放区代码），我在其中放置要上传的图像。当我删除图像时，我有控制台记录文件名，它工作得很好。问题是我需要获取该文件名并将其推送到我的 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 对象设置为该文件名的值的最佳方法是什么？

【问题讨论】：

在Vue生命周期方法之一中初始化dropzone，可能是mounted，然后在dropzone函数中设置vue变量。
@StevenB。所以要做到这一点，我几乎需要将我现有的函数插入到挂载的方法中，而不仅仅是一个 JS 函数？

标签： javascript vue.js dropzone.js

【解决方案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>

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

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>

【讨论】：