如何仅渲染将孩子分组的项目？

如何解决如何仅渲染将孩子分组的项目？

我正在使用Vuetify，并且正在尝试v-list-group。而且我想知道是否可以针对没有孩子的物品禁用类似群组的行为？

<template>
  <v-layout fill-height>
    <v-navigation-drawer v-model="$data._homeNavigator" style="z-index:100" stateless>
      <v-list>
        <v-list-group v-for="(page,i) in $data._pages" :key="i" :to="page.to" nuxt>
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-tile-title>{{ page.title }}</v-list-tile-title>
            </v-list-item-content>
          </template>

          <v-list-item v-for="(childPage,i) in page.children" :key="i" :to="childPage.to" nuxt>
            <v-list-item-content>
              <v-list-item-title>{{ childPage.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>
    <nuxt-child />
  </v-layout>
</template>

<script lang="ts">
import Vue from "vue";
import Firebse from "@nuxtjs/firebase";
export default Vue.extend({
  data() {
    return {
      _homeNavigator: true,_currentPage: "/dashboard",_pages: [
        {
          title: "Dashboard",children: [],to: "/dashboard",active:true,},{
          title: "Customize",children: [
            {
              title: "Start",to: "/home/customize/start",{
              title: "Login",to: "/home/customize/login",

这给了我类似的东西

如您所见，仪表板现在即使没有子级也可以扩展。我在下拉图标周围放了一个红色圆圈。我想删除该下拉图标，并将其作为指向另一个页面的纽特链接。

解决方法

如果页面有子页面，请尝试以v-list-group为条件v-if进行渲染。如果不存在，则仅呈现为列表项。示例：

<v-list>
    <span v-for="(page,i) in $data._pages" :key="i">
        <v-list-item v-if="page.children.length === 0" :to="page.to" nuxt>
            <v-list-item-content>
                <v-list-item-title>{{ page.title }}</v-list-item-title>
            </v-list-item-content>
        </v-list-item>

        <v-list-group v-else>
            <template v-slot:activator>
                <v-list-item-content>
                    <v-list-tile-title>{{ page.title }}</v-list-tile-title>
                </v-list-item-content>
            </template>

            <v-list-item
                v-for="(childPage,i) in page.children"
                :key="i"
                :to="childPage.to"
                nuxt
            >
                <v-list-item-content>
                    <v-list-item-title>{{ childPage.title }}</v-list-item-title>
                </v-list-item-content>
            </v-list-item>
        </v-list-group>
    </span>
</v-list>