Vue.js：基于计算属性的条件渲染

Question

我正在尝试基于计算属性有条件地渲染元素，但即使我的计算属性正确返回 true 或 false 也没有太多运气。

我将用户对象作为属性（来自 Laravel）传递，一切正常。我能够看到用户——以及他们的相关角色。

我已经通过 Laravel 进行了测试，以确保我发送了正确的用户和关系，并且那里的一切看起来都很好。

控制器

$user = User::with('roles')->find(Auth::id());

刀片

<my-component :user="{{ $user }}"></my-component>

VueComponent.vue

<template>
    <div>
        <div v-if="admin">
            <p>You are an admin!</p>
        </div>
        <div v-else>
            <p>You are not an admin.</p>
        </div>
    </div>
</template>



<script>
export default {

    ...

    computed: {
        admin: function () {
            this.user.roles.forEach((role) => {
                console.log('role: ', role);  // role: admin (string)
                if (role.name === 'admin') {
                    console.log('user is an admin!');  // I am getting here.
                    return true;
                } else {
                    console.log('user is NOT an admin.');
                }
            });

            return false;
        },
    },
    methods: {
        //
    },
    props: {
        user: {
            type: Object,
            required: true,
        },
    },
}
</script>

我确定我没有正确实现计算属性；非常感谢任何帮助！

Answer 1

您的问题是错误地使用了 foreach！请改用这个：

  computed: {
      admin: function () {
          for (var i = 0; i < this.user.roles.length; i++){
            if ( this.user.roles[i].name === 'admin') {
                    return true;
            }
          }
          return false;
      }
   }

你可以阅读这篇关于forEach in js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach的文章

您的错误是从 forEach callback 函数返回 true 并让这个 true 值无用，然后在 admin 函数上返回 false 值。