javascript - VueJS：方法未在实例上定义

Question

我为拖放元素制作了一个组件。我想要做的是使用我的 .vue 模板文件，而不是将所有 HTML 写在模板之后的单行上。（当我在组件本身中编写它时，它可以正常工作，但看起来不太好。）我需要它成为一个组件，因为它可能在一页上有多个组件。

这是我的 .js 文件：

    import Vue from 'vue';
    import SingleFileUpload from './single-file-upload.vue'

    Vue.component ('test', SingleFileUpload, {
        delimiters: ['${', '}'], // Avoid Twig conflicts
        data() {
            return filelist // Store our uploaded files
        },
        methods: {
          onChange() {
            this.filelist = [...this.$refs.file.files];
          },
          remove(i) {
            this.filelist = [];
          },
          dragover(event) {
            event.preventDefault();
            // Add some visual fluff to show the user can drop its files
            if (!event.currentTarget.classList.contains('highlight')) {
              event.currentTarget.classList.remove('bg-haze');
              event.currentTarget.classList.add('highlight');
            }
          },
          dragleave(event) {
            // Clean up
            event.currentTarget.classList.add('bg-haze');
            event.currentTarget.classList.remove('highlight');
          },
          drop(event) {
            event.preventDefault();
            this.$refs.file.files = event.dataTransfer.files;
            this.onChange(); // Trigger the onChange event manually
            // Clean up
            event.currentTarget.classList.add('bg-haze');
            event.currentTarget.classList.remove('highlight');
          }
        },
        template: SingleFileUpload
    })

    new Vue({ 
        el: '#App',
       })

这是我的 .vue 文件

<template>
    <div class="file-upload__wrapper">
        <div
            class="file-upload__drop-area"
            @dragover="dragover"
            @dragleave="dragleave"
            @drop="drop"
        >
            <input
                type="file"
                name="file-upload-bank"
                id="file-upload-bank"
                class="d-none"
                @change="onChange"
                ref="file"
                accept=".pdf,.jpg,.jpeg,.png"
            />
            <ul v-if="this.filelist.length" v-cloak>
                <li v-for="file in filelist" v-bind:key="file.id">
                    <span>Bestand: ${ file.name }</span
                    ><button
                        type="button"
                        @click="remove(filelist.indexOf(file))"
                        title="Verwijder bestand"
                    >
                        <i class="icon-cross"></i>
                    </button>
                </li>
            </ul>
            <label for="file-upload-bank" class="block cursor-pointer" v-else>
                <div>Kies een bestand of drag and drop het bestand</div>
            </label>
        </div>
    </div>
</template>

在我的页面中，我用来放置它。

不幸的是，我得到了这个错误（我在模板中使用的所有方法都会得到这个错误）。

vue.common.dev.js:630 [Vue warn]: Property or method "dragover" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Test> at assets/scripts/vue-components/forms/single-file-upload.vue
       <Root>

谁知道我做错了什么以及如何解决？

标签： javascriptvue.jsvuejs2components