使用Axios与Vue无法渲染返回数组结果的问题求助

先帮你梳理下代码里的几个关键问题，这些就是导致数据存在但页面不渲染的核心原因：

1. v-if 和 v-for 顺序错误，且 key 属性缺失 #

你的HTML代码里：

<tr v-if="myuser" v-for="myuser in allMyUsers" :key=""> 
  <td>{{ myuser.email }}</td> 
  <td></td> 
</tr>

• v-if 和 v-for 顺序问题：Vue中v-for的优先级高于v-if，这里的v-if="myuser"会被当成对每个遍历项的判断，但你的意图应该是先判断allMyUsers是否存在再渲染列表。正确的做法是把判断放在父元素上，或者直接依赖数组的存在性：

  <!-- 推荐写法：先判断数组是否有内容，再渲染列表 -->
  <tbody v-if="allMyUsers && allMyUsers.length > 0">
    <tr v-for="myuser in allMyUsers" :key="myuser.id"> 
      <td>{{ myuser.email }}</td> 
      <td></td> 
    </tr>
  </tbody>
  <!-- 可选：添加空状态提示 -->
  <tbody v-else>
    <tr>
      <td colspan="2">暂无数据</td>
    </tr>
  </tbody>
  

• key 属性缺失:key=""是无效的，Vue要求v-for的key必须是唯一标识，这里你已经给每个myuser添加了id属性，所以直接绑定:key="myuser.id"即可。

2. computed 属性返回值可能不符合预期 #

你的computed代码：

computed: {
  allMyUsers () {
    return !this.$store.getters.myuser ? false : this.$store.getters.myuser
  },
},

当this.$store.getters.myuser是一个空数组时，!this.$store.getters.myuser会返回true，导致computed返回false，而v-for无法在false上遍历。建议改成返回空数组而非false，保证类型统一：

computed: {
  allMyUsers () {
    // 如果getter返回undefined/null/空数组，就返回空数组，否则返回数据
    return this.$store.getters.myuser || []
  },
},

3. 确认state初始值类型 #

确保你的Vuex state中myuser的初始值是数组[]，而不是null或undefined，这样即使还没获取到数据，computed返回的也是空数组，不会出现类型不一致的问题：

// Vuex state示例
state: {
  myuser: [],
  // 其他state...
}

验证步骤 #

1. 先修改上述代码，然后在浏览器控制台打印this.$store.getters.myuser，确认它是一个包含正确数据的数组；
2. 检查computed的allMyUsers返回值是否和getter一致；
3. 查看页面元素，确认列表是否被正确渲染（如果数组有数据，应该能看到元素）。

按照这些调整后，页面应该就能正常显示数据了！

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