javascript - 如果用户已登录或未登录，显示不同的列表项

我有一个可能的侧边导航项数组，我想将其渲染到屏幕上。访客用户应该只能看到其中的两个项目，而当用户登录后，他应该能够看到全部三个项目。如果用户未登录，我如何不渲染列表中的第一个项目？

apps: Array<SideNavItemModel> = [
{
  title: "sideNav.centralWeighingLink",
  url: "centralWeighing",
  id: "1",
  icon: "mdi-scale-balance",
  isAuthorized: false
},
{
  title: "sideNav.appsLink",
  url: "apps",
  id: "2",
  icon: "mdi-apps"
},
{
  title: "sideNav.2Link",
  url: "password",
  id: "3",
  icon: "mdi-key-variant"
},
]; 

我有一个挂载的方法，它检查 $auth.user 对象是否不为 null，然后将 isAuthorized 的值设置为 true。

这是现在渲染列表的代码：

    <v-list dense>
    <v-list-item v-for="app in apps" :key="app.id"
                 active-class="router-link-active" :to="`/${app.url}`" link>
      <div v-if="!$auth.user && app.isAuthorized === false ">
        <v-list-item-icon>
          <v-icon>{{ app.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ $t(app.title) }}</v-list-item-title>
        </v-list-item-content>
      </div>
    </v-list-item>
  </v-list>

我不知道如何编写这个代码块以便在不硬编码的情况下省略列表中的第一个项，因为下面这一行不起作用。

v-if="!$auth.user && app.isAuthorized === false"

我知道使用 loggedIn 方法会更容易，但由于目前应用程序的构建方式，我无法使用它。

答案＃1

如果你想在用户登录后显示第一个项目，只需更改第一个项目的条件。

像这样初始化应用程序：

apps: Array<SideNavItemModel> = [
  {
    title: "sideNav.centralWeighingLink",
    url: "centralWeighing",
    id: "1",
    icon: "mdi-scale-balance",
    isAuthorized: false
  },
  {
    title: "sideNav.appsLink",
    url: "apps",
    id: "2",
    icon: "mdi-apps",
    isAuthorized: true
  },
  {
    title: "sideNav.2Link",
    url: "password",
    id: "3",
    icon: "mdi-key-variant",
    isAuthorized: true
  },
]; 

然后像这样呈现列表：

 <v-list dense>
    <v-list-item v-for="app in apps" :key="app.id"
                 active-class="router-link-active" :to="`/${app.url}`" link>
      <div v-if="app.isAuthorized">
        <v-list-item-icon>
          <v-icon>{{ app.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ $t(app.title) }}</v-list-item-title>
        </v-list-item-content>
      </div>
    </v-list-item>
  </v-list>

用户登录后，只需将第一个应用的 isAuthorized 设置为 true。

只是说说我的想法，希望有帮助。

答案＃2

用户登录后，通过 mutations 将令牌存储在 store 中。注意，它将是一个字符串，但你应该使用 !! 将其转换为布尔值。''=false，但 ' '=true。
这就是你需要的全部内容。

new Vue({
  el: '#app',
  data() {
    return {
      hello: 'hellasdfo',
      token: false,
    }
  },
  created() {
    // store in store and get it with getters
    // this.token = !!this.$store.getters['token'] or !!this.$store.getters.token
    this.token = !!'some token';
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <p>Not LoggedIn</p>
  <p>Not LoggedIn</p>
  <p v-if="token">LoggedIn</p>
</div>