Vue中如何根据数组内用户的display_name动态设置按钮样式

嘿，我看了你的代码，问题出在计算属性showRole的作用域上——它是属于整个组件的，没法直接访问v-for循环里的单个user对象，所以this.user自然是undefined啦。下面给你几种简单可行的解决方案：

方案1：把showRole改成方法（最直观的方式） #

因为方法可以接收参数，我们直接把当前循环的user传进去就行：

修改<script>部分： #

export default {
  data() {
    return {
      users: [],
    }
  },
  // 把computed换成methods
  methods: {
    showRole(user) {
      // 根据display_name返回对应的类名
      return user.display_name === "Manager" ? "btn-danger" : "grey-darkest";
      // 这里可以加更多判断，比如else if处理其他角色
    }
  },
  mounted() {
    axios.get('/api/users').then(response => this.users = response.data);
  },
}

修改模板中的按钮部分： #

把:class="showRole"改成:class="showRole(user)"，同时别忘了给v-for加上唯一的key（Vue推荐这么做，提升性能和避免警告）：

<tbody>
  <tr v-for="user in users" :key="user.name">
    <td v-text="user.name"></td>
    <td v-text="user.username"></td>
    <td v-text="user.display_name"></td>
    <td class="text-center">
      <button class="letter-shadow btn-sm font-500 roboto letter-spacing" :class="showRole(user)">
        Activate 
      </button>
    </td>
  </tr>
</tbody>

方案2：直接在模板中写三元表达式（更简洁） #

如果逻辑不复杂，完全可以不用额外的方法或计算属性，直接在模板里判断：

<button 
  class="letter-shadow btn-sm font-500 roboto letter-spacing" 
  :class="user.display_name === 'Manager' ? 'btn-danger' : 'grey-darkest'"
>
  Activate 
</button>

方案3：用返回函数的计算属性（进阶用法） #

如果你坚持想用计算属性，也可以让它返回一个接收user参数的函数（不过这种写法可读性不如方法，适合复杂逻辑复用的场景）：

computed: {
  showRole() {
    return (user) => {
      return user.display_name === "Manager" ? "btn-danger" : "grey-darkest";
    }
  }
}

模板里同样用:class="showRole(user)"就行。

另外提个小建议：你的表格模板里<tbody>用v-for其实不太规范，通常应该把v-for放在<tr>标签上，因为一个<tbody>对应一组行，上面的代码已经帮你修正了这个细节~

这样修改后，就能根据每个用户的display_name动态设置按钮的类名啦！

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