Vue中Props传递用户数据至子组件时出现渲染异常求助

以下是你的代码中导致组件无法正常渲染的几个关键问题及修复方案：

1. Vuex Getter名称不匹配 #

你的Sidebar组件中通过this.$store.getters.allUsers获取数据，但Vuex store里定义的getter名称是displayUsers，两者不匹配，导致无法拿到用户列表。

修复方案：
将store中的getter名称改为allUsers，保持与组件调用一致：

// Vuex store
getters: {
  allUsers: (state) => state.users, // 原名称displayUsers改为allUsers
},

2. User组件Props定义错误 #

User组件的props写法存在语法错误，且命名不符合语义（单个组件接收的是单个用户对象，而非列表）。

修复方案：
修改User组件的props定义为正确的数组/对象格式，并使用单数命名user：

<!-- User.vue -->
<template>
    <div class="user">
        <div class="user__block">
            <div class="user__img">
                <img src="../assets/img/Rectangle 4.svg"/>
            </div>
            <div class="user__info">
                <p class="user__name">{{ user.name }}</p> <!-- 同步修改为user.name -->
                <p class="user__email">{{ user.email }}</p> <!-- 替换死值，动态绑定用户邮箱 -->
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    user: {
      type: Object,
      required: true // 确保必须传入用户对象
    }
  }
}
</script>

3. v-for循环变量与Props传递错误 #

Sidebar组件的v-for循环变量命名为users（复数）会造成语义混淆，且传递给User组件的props名称和key绑定也存在错误。

修复方案：
修改v-for循环变量为单数user，并正确传递props和绑定key：

<!-- Sidebar.vue -->
<template>
    <div class="sidebar">
        <div class="sidebar__info">
            <p class="sidebar__title">Поиск сотрудников</p>
            <input class="sidebar__input"/>
            <p class="results">Результаты</p>
            <div class="results__info" v-for="user in allUsers" :key="user.id" >
                <User :user="user"/> <!-- 传递单个user对象给子组件 -->
            </div>
        </div>
    </div>
</template>

完成以上修改后，用户列表数据就能正确从Vuex传递到Sidebar组件，再循环渲染每个User子组件了。

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