Javascript 基于数组值显示UL元素_Javascript_Vue.js

Javascript 基于数组值显示UL元素

javascript vue.js

Javascript 基于数组值显示UL元素,javascript,vue.js,Javascript,Vue.js,如果我转储auth_user，我有一个如下的模块数组[{id:1，名称：'item-employee'}，{id:2，名称：'item-manager'}] 我想检查auth_用户模块是否专门包含item employee，如果是，我想显示一个有限的元素。否则，我想显示更多选项我正在尝试这一点，但它仍然显示所有3个导航项目，即使我的用户对象具有应该限制它的模块我做错了什么 <ul v-if="auth_user.modules.includes(item-employee)"

如果我转储auth_user，我有一个如下的模块数组

[{id:1，名称：'item-employee'}，{id:2，名称：'item-manager'}]

我想检查auth_用户模块是否专门包含item employee，如果是，我想显示一个有限的元素。否则，我想显示更多选项

我正在尝试这一点，但它仍然显示所有3个导航项目，即使我的用户对象具有应该限制它的模块

我做错了什么

    <ul v-if="auth_user.modules.includes(item-employee)" class="nav nav-tabs nav-fill" role="tablist" id="Item-tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#dailyList" role="tab" aria-controls="dailyList" aria-selected="true">Daily Item List</a>
        </li>
    </ul>
    <ul v-else class="nav nav-tabs nav-fill" role="tablist" id="Item-tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#dailyList" role="tab" aria-controls="dailyList" aria-selected="true">Daily Item List</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#calendarView" role="tab" aria-controls="calendarView" aria-selected="false">Calendar</a>
        </li>
        <li class="nav-item">
            <a  class="nav-link" data-toggle="tab" href="#userView" role="tab" aria-controls="userView" aria-selected="false">Users</a>
        </li>
    </ul>

恐怕此行的计算结果不正确（需要）

我会对

计算的属性进行过滤。比如：
导出默认值{
数据（）{
返回{
授权用户：{
模块：[
// ...
]
}
}
},
计算：{
模块（）{
返回this.auth_user.modules.filter（this.moduleFilter）；
}
},
方法：{
模块过滤器（项目）{
如果（item.name==‘item employee’）{
返回错误
}
else if（您的其他过滤器）{
// ...
}
返回true；
}
}
}

编辑
如果只需要在模板中内联过滤它们
方法：{
检查模块（验证用户）{
返回auth_user.modules.some（item=>item.name==“item employee”）；
}
}

在模板中




您可以使用find方法。下面是一个示例。它将打印user1有员工，user2没有员工
<html>
    <title>
        <head>Hello World</head>
    </title>
    <body>
        <div id="app">
            <h1 v-if="user1.modules.find(module => module.name === 'item-employee')">user1 has employees</h1>
            <h1 v-else>user1 has no employees</h1>
            <h1 v-if="user2.modules.find(module => module.name === 'item-employee')">user2 has employees</h1>
            <h1 v-else>user2 has no employees</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
                var app = new Vue({
                el: '#app',
                data: {
                  user1: {
                      modules: [{id:1, name:'item-employee'},{id:2, name:'item-manager'}]
                  },
                  user2: {
                      modules: [{id:1, name:'item-manager'},{id:2, name:'item-manager'}]
                  }
                }
              })
        </script>
    </body>
</html>


你好，世界
user1有员工
user1没有员工
user2有员工
user2没有员工
var app=新的Vue({
el:“#应用程序”，
数据：{
用户1：{
模块：[{id:1，名称：'item-employee'}，{id:2，名称：'item-manager'}]
},
用户2：{
模块：[{id:1，名称：'item-manager'}，{id:2，名称：'item-manager'}]
}
}
})
那么，在这种情况下，我会在html部分做什么呢？您只需在模板中使用模块
数组，无需担心过滤问题。尽管这实际上取决于您是否在一个v-for
中循环模块？我根本没有循环它们，我只是从这一点开始，作为一种只向具有该模块的人显示某些链接的方式。关键是我们需要检查单个auth\u user.modules
的name属性。
<html>
    <title>
        <head>Hello World</head>
    </title>
    <body>
        <div id="app">
            <h1 v-if="user1.modules.find(module => module.name === 'item-employee')">user1 has employees</h1>
            <h1 v-else>user1 has no employees</h1>
            <h1 v-if="user2.modules.find(module => module.name === 'item-employee')">user2 has employees</h1>
            <h1 v-else>user2 has no employees</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
                var app = new Vue({
                el: '#app',
                data: {
                  user1: {
                      modules: [{id:1, name:'item-employee'},{id:2, name:'item-manager'}]
                  },
                  user2: {
                      modules: [{id:1, name:'item-manager'},{id:2, name:'item-manager'}]
                  }
                }
              })
        </script>
    </body>
</html>