Vue3中v-for渲染Select选项不显示GraphQL查询结果问题

你的问题出在数据赋值环节：在getAllSchools方法中，你把接口返回的学校数据存到了局部变量schoolList里，但没有将其同步到组件data中声明的响应式schoolList属性，导致模板里的v-for无法获取到更新后的数据。

修改JS部分的getAllSchools方法即可解决：

async getAllSchools() {
  const schools = await API.graphql({
       query: listSchools
  });
  // 将局部变量改为赋值给组件的响应式数据
  this.schoolList = schools.data.listSchools.items;
  console.log(this.schoolList)
},

额外检查点：

• 确认返回的schools.data.listSchools.items数组中，每个对象都包含id（用于v-for的:key）和longname字段，避免因字段缺失导致渲染异常。
• 确保组件的data中schoolList初始值为数组[]，避免渲染时出现类型错误。

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