vue.js - 使用 Vue.js 的条件 v-List 项的最佳实践

Question

我正在构建一个应用程序，该应用程序需要根据最终用户的角色和权限来调整其 v-list 项。至少有4个角色。

目前我在代码中有一个数组，该列表是从中构建的。

   menu_items: [
  {
    icon: "keyboard_arrow_up",
    "icon-alt": "keyboard_arrow_down",
    text: "Trainees",
    type: "link",
    model: false,
    children: [
      {
        icon: "contacts",
        text: "Application",
        type: "link",
        ref: "/trainee/application/"
      },
      {
        icon: "contacts",
        text: "Business Manager",
        type: "link",
        ref: "/trainee/businessManager/"
      },

我建立菜单项:

    <template v-slot:activator>
          <v-list-tile>
            <v-list-tile-content>
              <v-list-tile-title>{{ item.text }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </template>
        <v-list-tile
          v-for="(child, i) in item.children"
          :key="i"
          @click.stop="child.type === 'link' ? goPage(child.ref) : child.func.apply(this)"
        >
          <v-list-tile-action v-if="child.icon">
            <v-icon>{{ child.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{child.text }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list-group>
      <v-list-tile v-else :key="item.text">
        <v-list-tile-action>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-tile-action>
        <v-list-tile-content>
          <v-list-tile-title>{{ item.text }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </template>

我的问题是构建条件列表的标准方法是什么？我应该从基于用户权限构建它的数据库中提取不同的数组吗？我应该向每个以角色或权限为条件的元素添加一个项目吗？页面是否也应该有自己的权限？我看过一些 YouTube 视频，但它们大多只是用户和管理员。

很抱歉这些问题，但使用 Vue 为我开辟了不同的构建项目的方式。如果有一篇博客或文章解释了各种选项，那也很棒。

我知道从来没有唯一的方法可以做任何事情，但接近它是我正在寻找的所有标准。

Answer 1

最好的方法是创建一个 computed property ，在那里进行数据整形、过滤、排序和分组，然后引用 computed property从您的模板。

<li v-for='item in filteredItems'>{{item}}</li>

data: ()=>({ myDataItems: ['a', 'b', 'c', 'foo'] }),
computed: {
  filteredItems() {
    return.myDataItems.filter(it=>!it.startsWith('foo')).sort();
  }
}