1

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

我将它导入到我的 bootstrap.js 中，如下所示：

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

然后，我希望能够在名为“CreatePersonalExpense.vue”的文件中的一个组件中使用。使用Vue 路由器访问该组件。

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

<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 放在脚本标记的开头直接将 dropzone 导入此 Vue 组件，则 dropzone 可以正常工作。为什么我不能将它包含在 bootstrap.js 文件中并让它在那里工作？

4

2 回答 2

1

尝试如下定义 =>

Vue.component('vue-dropzone', vueDropzone)
于 2019-02-19T12:45:32.030 回答
1

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

components: {
  vueDropzone
}

vueDropzone是一个未定义的变量。只需将其删除，它应该可以工作。

于 2019-02-20T01:38:38.377 回答