Vue中使用v-for无法渲染Themealdb API分类数据问题求助

核心问题1：API数据结构处理错误 #

你直接把response.data赋值给了categories，但该API返回的是一个包含categories数组的对象（结构类似{ categories: [{}, {}, ...] }），所以你的categories实际上是个对象，不是数组，导致v-for循环无法正确遍历。

修改JS代码里的赋值逻辑：

this.categories = response.data.categories;

核心问题2：v-for变量名冲突 #

你在v-for里用了(categories, index) in categories，循环变量名和data里的数组名重名，会导致变量覆盖，无法正确访问属性。修改循环变量名为category：

<ul class="categorie-list">
  <li v-for="(category, index) in categories" :key="index">
    {{ category.strCategory }}
  </li>
</ul>

额外警告处理 #

控制台的searchQuery未定义警告，是因为你的模板里用到了searchQuery但没有在data中声明。在data里添加该属性即可：

data() {
  return {
    categories: [],
    searchQuery: '' // 根据实际需求设置默认值
  }
},

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