在 v-treeview 中仅显示启用的项目答案

【问题标题】：Show only enabled item in v-treeview在 v-treeview 中仅显示启用的项目
【发布时间】：2021-10-06 10:20:44
【问题描述】：

我正在使用 v-treeview，并且我有类似的项目：

[
    {
        id: 1,
        name: 'name 1',
        disabled: false,
        children: [
            {
                id: 2,
                name: 'name 2',
                disabled: false,
                children: [
                    {
                        id: 3,
                        name: 'name 3',
                        disabled: false
                    }
                ]
            },
            {
                id: 4,
                name: 'name 4',
                disabled: false,
                children: [
                    {
                        id: 5,
                        name: 'name 5',
                        disabled: true
                    }
                ]
            },
            {
                id: 6,
                name: 'name 6',
                disabled: true,
                children: [
                    {
                        id: 7,
                        name: 'name 7',
                        disabled: true
                    }
                ]
            }
        ]
    }
]

我想要的是，只显示禁用 false 的项目；无需通过过滤器数据发送到 v-treeview;

我已经尝试过在禁用时不显示任何数据的插槽为真，但项目设置为空白：

<template v-slot:label="{item}" >
    <v-container v-if="!item.disabled">
          {{  item.name  }}
    </v-container>
</template>

有些项目提供了v-select，它允许切换子项目的禁用值，所以不能使用过滤器计算，因为我无法访问禁用的孩子；

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您可以使用computed 来创建动态变量：

computed: {
  visibleElements: function() {
    // filter here only entries you are interested to show
    let visibleElements = elements.map(el => {
        :
        :
    });
    return visibleElements;
  }
}

【讨论】：