在组件内部使用时未定义 Dropzone

Question

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

我正在将其导入到我的 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>

但是无法识别拖放区，我收到错误消息：

Uncaught ReferenceError: vueDropzone is not defined

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

Answer 1

尝试如下定义=>

Vue.component('vue-dropzone', vueDropzone)

Answer 2

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

中删除它

components: {
  vueDropzone
}

vueDropzone 是一个未定义的变量。只需将其删除即可。

在组件内部使用时未定义 Dropzone

Dropzone is not defined when used inside a component

dropzone.js

vue.js

vuejs2

laravel-mix

vue2-dropzone