VueJS中如何将对象键值对内的数组类型值作为列表项展示

解决方法 #

你只需要调整v-tab-item内的uses部分代码，对当前组件的uses数组做循环渲染即可，修改后完整代码如下：

<v-tabs vertical>
    <v-tab v-for="component in allComponents" :key="component.name">
        {{ component.name }}
    </v-tab>
    <v-tab-item v-for="component in allComponents" :key="component.name">
        <v-form>
            <!-- Name -->
            <label class="add-component-name">Name</label>
            <p>{{ component.name }}</p>
            <!-- Uses -->
            <label class="add-component-sub-heading">Uses</label>
            <v-list class="background-colour-grey">
                <v-list-item v-for="(use, index) in component.uses" :key="index">
                    <v-list-item-content>
                        {{ use }}
                    </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-form>
        <v-btn @click="showAddComponentDialog = false"/>
    </v-tab-item>
</v-tabs>

核心修改说明 #

• 删除了冗余的无效循环代码：<div v-for="component in allComponents.filter(comp=>comp.uses)" :key="component.name"></div>，这行代码既没有和当前tab对应的组件关联，也没有输出任何内容，不需要保留。
• 将v-for指令绑定到v-list-item上，直接遍历当前组件的uses数组，每个数组元素单独生成一个列表项渲染，即可得到你需要的无序列表效果。

内容的提问来源于stack exchange，提问作者One_for_all