Vue.js实现门店名称旁显示对应目录总数问题求助

• 先确认后端数据是否正确返回
  首先检查后端查询门店接口的返回结果：

  • 确保查询门店时关联拉取了对应的目录数据，比如用ORM的关联查询（如Laravel的with('catalogues')、Django的select_related/prefetch_related），否则前端拿到的store.catalogues就是空数组或者undefined。
  • 在浏览器控制台打印返回的门店数组（比如console.log(stores)），查看每个store对象里的catalogues字段是否为数组，且包含实际的目录元素。

• 前端模板做兜底和响应性处理
  如果后端数据没问题，调整前端模板：

  • 用可选链运算符避免catalogues为null/undefined时报错，同时兜底显示0：

    {{ store.name }}: {{ store.catalogues?.length || 0 }}
    

  • 确保数据加载完成后再渲染，比如给循环加v-if判断数据是否存在，避免初始状态下渲染空数据：

    <div v-for="store in stores" :key="store.id" v-if="stores.length">
      {{ store.name }}: {{ store.catalogues?.length || 0 }}
    </div>
    

• 排查动态数据的响应性问题
  如果是后续异步加载目录数据到门店对象中，要保证Vue能检测到数据变化：

  • 不要直接给store添加catalogues属性，要用Vue.set(store, 'catalogues', fetchedCatalogues)或者用扩展运算符重新赋值：

    this.stores = this.stores.map(store => {
      if (store.id === targetId) {
        return {...store, catalogues: fetchedCatalogues}
      }
      return store
    })
    

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