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

Question

我有一系列可能的侧面导航项目，我想渲染到屏幕上。 来宾用户应该只能看到 2 个项目，当用户登录时，他应该能够看到所有 3 个项目。 如果用户未登录，我将如何不呈现列表中的第一项？

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 object 是否不是 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 方法会更容易，但由于当前构建应用程序的方式，我无法使用它。

Answer 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 。

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

Answer 2

用户登录后，将令牌存储在带有突变的商店中。 请注意，它将是一个字符串，但您应该使用!!将其转换为 boolean ！ . '' = false但' ' is 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>

Answer 3

当您在数组中的每个 object 中分配isAuthorized属性时，然后根据$auth.user您将其设置为true / false 。 然后我们可以通过更新created()钩子中的标志来简单地实现这一点。

现场演示：

 new Vue({ el: '#app', data: { apps: [ { title: "sideNav.centralWeighingLink", url: "centralWeighing", id: "1", icon: "mdi-scale-balance" }, { title: "sideNav.appsLink", url: "apps", id: "2", icon: "mdi-apps" }, { title: "sideNav.2Link", url: "password", id: "3", icon: "mdi-key-variant" } ], isLoggedInUser: false }, created() { if (this.isLoggedInUser) { this.apps.forEach(obj => obj.isAuthorized = true) } else { this.apps.forEach((obj, index) => { obj.isAuthorized = (index)? true: false }) } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="app in apps":key="app.id"> <li v-if="app.isAuthorized">{{ app.url }}</li> </div> </div>