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;
      }
   }

您可以在js https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

中阅读有关forEach的文章。

您的错误是从forEach true函数返回callback并将该true值保留为无效，然后在false函数上返回了admin值。

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

1 个答案: