Vue如何根据用户角色动态展示欢迎消息中的用户名？

你当前的核心问题有两个：

1. 数据命名混淆：原currentUser实际是所有用户的数组，但你需要单独的变量存储当前登录用户，否则无法判断当前登录者的角色。
2. 判断逻辑错误：直接给数组currentUser取systemAdmin属性，数组本身不存在这个属性，导致判断永远不成立。

修正步骤： #

1. 调整数据结构：把原currentUser重命名为allUsers（存储所有用户列表），新增loggedInUser变量存储当前登录的用户对象（实际项目中由axios返回单用户数据）。
2. 修正计算属性filterUser逻辑：
   • 判断当前登录用户是否为系统管理员
   • 若是，返回所有管理员用户的数组
   • 若不是，返回仅包含当前登录用户的数组（适配模板里的v-for循环）

完整修正代码： #

<template>
  <b-container>
      <b-modal
        centered
        v-model="isVisible">
          <b-row v-for="user in filterUser" :key="user.name">
            <b-col class="text-center">
              <h2>{{ $t('welcomeTo') + ' ' }}<span style="color: #31a58e">website name</span> {{' ' + user.name }}</h2>
            </b-col>
          </b-row>
      </b-modal>
  </b-container>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
      // 存储所有用户列表
      allUsers: [
        {
          systemAdmin: true,
          name: 'Michael'
        },
        {
          systemAdmin: false,
          name: 'Marie'
        },
        {
          systemAdmin: false,
          name: 'Martin'
        }
      ],
      // 当前登录用户（实际由axios获取，此处硬编码模拟）
      loggedInUser: {
        systemAdmin: false,
        name: 'Marie'
      },
    };
  },
  computed: {
    filterUser() {
      if (this.loggedInUser.systemAdmin) {
        // 返回所有管理员用户
        return this.allUsers.filter(user => user.systemAdmin);
      } else {
        // 返回仅包含当前登录用户的数组
        return [this.loggedInUser];
      }
    },
  }
}
</script>

关键修改说明： #

• 新增loggedInUser明确当前登录身份，避免与用户列表混淆
• 计算属性的判断对象改为当前登录用户的systemAdmin属性，逻辑生效
• 普通用户场景返回单元素数组，适配模板的v-for循环要求
• 给v-for添加:key属性，符合Vue性能优化规范

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