Question

如果我转储auth_user，我将有一个像QUERY VARIABLES这样的模块数组

我想检查auth_user模块是否特别包含item-employee，如果是，我想显示一个有限的元素。否则，我想显示更多选项。

我正在尝试此操作，但是即使我的用户对象具有应限制它的模块，它仍会显示所有3个导航项。

我在这里做什么错了？

[{id:1, name:'item-employee'},{id:2, name:'item-manager'}]

Answer 1

恐怕此行的计算结果未达到正确的（所需）值。

.includes(item-employee)

我将对computed属性进行过滤。像这样：

export default {
  data() {
    return {
      auth_user: {
        modules: [
          // ...
        ]
      }
    }
  },

  computed: {
    modules() {
      return this.auth_user.modules.filter(this.moduleFilter);
    }
  },

  methods: {
    moduleFilter(item) {
      if (item.name === 'item-employee') {
        return false
      }
      else if (your_other_filter) {
        // ...
      }

      return true;
    }
  }
}

编辑

如果您只需要在模板中内联过滤它们，

methods: {
  checkModule(auth_user) {
    return auth_user.modules.some(item => item.name === 'item-employee');
  }
}

在模板中，

<ul v-if="checkModule(auth_user)" 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 ...

Answer 2

您可以使用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>

根据数组值显示UL元素

2 个答案:

编辑