Vue3渲染对象列表时出现Cannot read properties of undefined错误求助

• 核心问题：v-for指令语法错误
  你的代码里<li :v-for="category in categories">这一行多了个冒号:，v-for是Vue的内置指令，不需要用v-bind（即冒号简写）来绑定。加了冒号后，Vue会把它当作普通属性解析，导致循环没有正确执行，category变量变成undefined，自然无法读取name属性。

• 修正方法
  把:v-for改成v-for，同时建议加上:key（Vue要求v-for循环必须绑定唯一key，避免渲染异常）：

  <li v-for="category in categories" :key="category.name" class="dropdown-link">
      {{ category.name }}
  </li>
  

• 额外注意点（后续用异步数据场景）
  要是之后你的categories是通过接口异步获取的，初始值可能为空数组或undefined，这时候可以用可选链操作符?.规避报错：

  {{ category?.name }}
  

  或者先判断数组存在再渲染：

  <ul class="dropdown-content" v-if="categories">
      <li v-for="category in categories" :key="category.name" class="dropdown-link">
          {{ category.name }}
      </li>
  </ul>
  

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