Dropzone не определяется при использовании внутри компонента - PullRequest
Новая
       80

Dropzone не определяется при использовании внутри компонента

0 голосов
/ 19 февраля 2019

Я сейчас пытаюсь импортировать 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

Однако, если бы я импортировал дропзону непосредственно в этот компонент Vue, поставив import vueDropzone from "vue2-dropzone"; в начале тега script, dropzone работает нормально.Почему я не могу просто включить его в файл bootstrap.js и заставить его работать там?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Если вы уже зарегистрировали vueDropzone в bootstrap.js, вам не нужно регистрировать его снова в своем компоненте.Вы должны удалить это в CreatePersonalExpense.vue

components: {
  vueDropzone
}

vueDropzone - неопределенная переменная.Просто удалите его, и оно должно работать.

0 голосов
/ 19 февраля 2019

Попробуйте определить, как показано ниже => 

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