I'm having trouble understanding why the property uploadedFiles
is not recognized in this Vue2 component. When running in a browser I get the following error:
[Vue warn]: Property or method "uploadedFiles" 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.
Minimal component:
<template>
<div>
<div v-for="filter in ['test 1', 'test 2']" :key="filter">
<h3>{{ filter }}</h3>
<div v-if="uploadedFiles[filter]">Present!</div>
</div>
</div>
</template>
<script>
export default {
name: 'UploadFilter',
data: function() {
return {
uploadedFiles: {}
}
}
};
Found:
The <script>
block was not closed with </script>
The <script>
block must be closed with </script>
. If you forget that Vue2 will not account for that codes existence.