如果用戶登錄或未登錄，則顯示不同的列表項

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>