Vue2组件中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.

最小复现代码 #

<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: {} 
    }
  }
};

问题原因与解决 #

问题根源是<script>标签未添加闭合标签</script>。Vue无法正确解析组件的脚本部分，导致data中声明的uploadedFiles没有被挂载到组件实例上，模板渲染时自然找不到该属性。

只需在代码末尾补充闭合的</script>标签即可解决问题，修正后的完整脚本部分如下：

<script>
export default {
  name: 'UploadFilter',
  data: function() { 
    return { 
      uploadedFiles: {} 
    }
  }
};
</script>

内容的提问来源于stack exchange，提问作者Ritsaert Hornstra