Vue2 not recognizing property in data section
Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram: / ky.emrah
Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Vue2 not recognizing property in data section
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:
uploadedFiles
[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.
[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: {}
}
}
};
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
script
/script
Tags: vue.js,vuejs2Source of the question:
https://stackoverflow.com/questions/7...
Question and source license information:
https://meta.stackexchange.com/help/l...
https://stackoverflow.com/