vue.js - 在组件内部使用时未定义 Dropzone

Question

我目前正在尝试将 vue2-dropzone 导入我的 Laravel 项目，因此它使用 Laravel mix。

我将其导入到 bootstrap.js 中，如下所示:

import vueDropzone from "vue2-dropzone";
Vue.component('vueDropzone', vueDropzone)

然后我希望能够在名为“CreatePersonalExpense.vue”的文件内的一个组件中使用。使用 Vue router 访问此组件。

下面是我的组件中如何使用它的片段:

<template>

<div class="form-row py-2">
    <div class="col-md-12">
        <h4>Upload</h4>
        <vue-dropzone v-on:vdropzone-sending="sendingFiles" id="drop1" ref="myVueDropzone" @vdropzone-complete-multiple="afterAllFilesUploaded" :options="dropOptions"></vue-dropzone>
    </div>
</div>

</template>

<script>
    export default {

        data() {
            return {
                type: "personal",
                id: "",
                total: "",
                files: {
                },
                dropOptions: {
                    url: '/api/expenses/files',
                    autoProcessQueue: false,
                    uploadMultiple: true,
                    headers: { "x-csrf-token": document.querySelector('meta[name="csrf-token"]').getAttribute('content') },
                    params: {}
                },
                errors: new Errors(),
                form: new Form(),
            }
        },

        components: {
            vueDropzone
        }
}
</script>

但是 dropzone 无法识别，我收到错误:

Uncaught ReferenceError :vueDropzone未定义

但是，如果我通过将 import vueDropzone from "vue2-dropzone"; 放在脚本标记的开头，将 dropzone 直接导入到此 Vue 组件中，则 dropzone 可以正常工作。为什么我不能将它包含在 bootstrap.js 文件中并让它在那里工作？

Answer 1

如果您已经在 bootstrap.js 中注册了 vueDropzone，则无需在组件中再次注册。您应该在 CreatePersonalExpense.vue

中删除它

components: {
  vueDropzone
}

vueDropzone 是一个 undefined variable 。只需删除它，它就应该可以工作。