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 is not defined

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

Answer 1

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

中将其删除

components: {
  vueDropzone
}

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

Answer 2

尝试定义如下=>

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

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

2 个答案: