javascript - 根据数组值显示 UL 元素

Question

如果我转储 auth_user，我会有一个像这样的模块数组 [{id:1, name:'item-employee'},{id:2, name:'item-manager'}]

我想检查 auth_user 模块是否专门包含 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>

Answer 1

恐怕这条线无法计算出正确的(期望的)值。

.includes(item-employee)

我会对计算属性进行过滤。像这样的东西:

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 ...