vue.jsvuejs2

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:

[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>


Solution

  • The <script> block must be closed with </script>. If you forget that Vue2 will not account for that codes existence.