Question

我想呈现一个由数据字典所组成的图块/链接列表。但是，我只希望将access_level（列表中的键）从vuex存储中的计算值呈现出来。您能以最好的方式帮忙吗？

我尝试在同一元素中组合v-if和v-for，但是我发现这是不可能的。我尝试调用一个函数以及在元素中使用逻辑。

我已经尝试过了：

<v-list>
  <v-list-tile v-for="link in userLinks" :key="link" :to="link.to" :v-if="link.access >= accessLevel">
    <v-list-tile-action>
      <v-icon class="primary--text">
        {{ link.icon }}
      </v-icon>
    </v-list-tile-action>
    <v-list-tile-content>
      <v-list-tile-title class="primary--text">
        {{ link.text }}
      </v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>
</v-list>

data() {
  return {
    userLinks: [
      { icon: 'security', text: 'Admin Panel', to: '/admin', access: 4 },
      { icon: 'account_circle', text: 'Profile', to: '/user', access: 1 }
    ]
  }
},
computed: {
  accessLevel() {
    return this.$store.state.authentication.access_level
  }
},

这：

<v-list>
  <v-list-tile v-for="link in userLinks" :key="link" :to="link.to" :v-if="accessCheck(link.access)">
    <v-list-tile-action>
      <v-icon class="primary--text">
        {{ link.icon }}
      </v-icon>
    </v-list-tile-action>
    <v-list-tile-content>
      <v-list-tile-title class="primary--text">
        {{ link.text }}
      </v-list-tile-title>
    </v-list-tile-content>
  </v-list-tile>
</v-list>

data() {
  return {
    userLinks: [
      { icon: 'security', text: 'Admin Panel', to: '/admin', access: 4 },
      { icon: 'account_circle', text: 'Profile', to: '/user', access: 1 }
    ]
  }
},
computed: {
  accessLevel() {
    return this.$store.state.authentication.access_level
  }
},
methods: {
  accessCheck(level) {
    return level >= this.accessLevel ? true : false
  }
}

组件模板：

<template>
  <nav>
    <v-toolbar flat app>
      <v-toolbar-side-icon class="grey--text" @click="drawer = !drawer" />
      <v-spacer />
      <v-menu left offset-y :nudge-width="200" class="mr-3">
        <template v-slot:activator="{ on }">
          <v-icon x-large class="primary--text" v-on="on">
            account_circle
          </v-icon>
        </template>
        <v-card>
          <v-list>
            <v-list-tile v-for="link in userLinks" :key="link.id" :to="link.to" :v-if="accessCheck(link.access)">
              <v-list-tile-action>
                <v-icon class="primary--text">
                  {{ link.icon }}
                </v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title class="primary--text">
                  {{ link.text }}
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile @click="logout">
              <v-list-tile-action>
                <v-icon class="primary--text">
                  power_settings_new
                </v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title class="primary--text">
                  Logout
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-menu>
    </v-toolbar>
    <v-navigation-drawer v-model="drawer" app class="primary">
      <v-layout column align-center>
        <v-flex class="mt-5 mb-4">
          <v-avatar size="200">
            <img src="culogo.png">
          </v-avatar>
        </v-flex>
      </v-layout>
      <v-list>
        <v-list-tile v-for="link in navLinks" :key="link" :to="link.to">
          <v-list-tile-action>
            <v-icon class="white--text">
              {{ link.icon }}
            </v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title class="white--text">
              {{ link.text }}
            </v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
  </nav>
</template>

我希望仅当用户访问级别大于或等于列表中指定的所需访问级别时才显示图块。

我正在使用nuxt.js

谢谢。

Answer 1

它能解决您的问题吗？

<v-list>
    <v-list-tile v-for="link in userLinks" :key="link" :to="link.to" v-if="accessCheck(link.access)">
        <v-list-tile-action>
            <v-icon class="primary--text">
                {{ link.icon }}
            </v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
            <v-list-tile-title class="primary--text"> 
                {{ link.text }}
            </v-list-tile-title>
        </v-list-tile-content>
    </v-list-tile>
</v-list>



computed: {
    // Add parameters to computed property this way
    accessCheck() {
        return (level) => {
            return this.$store.state.authentication.access_level >= level;
        }
    }
}

编辑1：

如果在商店中声明 getters ，则是一种更为优雅的解决方案。不是访问组件中商店状态的最佳实践！

store.js ：

getters: {
    getAccessLevel(state){
        return state.authentication.access_level;
    }
}

组件：

computed: {
    // Add parameters to computed property this way
    accessCheck() {
        return (level) => {
            return this.$store.getters['getAccessLevel'] >= level;
        }
    }
}

编辑2：

您的条件无效！

我希望仅当用户访问级别大于或等于列表中指定的所需访问级别时才显示图块。 return level >= this.accessLevel ? true : false

正确的条件：

return level <= this.accessLevel

如何通过将迭代值之一评估为计算值，使用v-for有条件地呈现列表？

1 个答案: