CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.js
anonymous-dev
anonymous-dev

Reputation: 3519

How can I only render items that have children as a group?

I am working with Vuetify and I am trying out the v-list-group. And I was wondering is there a way to disable the group like behaviour for items that don't have any children?

<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",
            },

So that gives me something like this

enter image description here

As you can see, the dashboard is now expandable even though it has no children. I put a red circle around the dropdown icon. I want to remove the dropdown icon and have it just be a nuxt link to another page.

Upvotes: 0

Views: 297

Answers (1)

Noah Stahl
Noah Stahl

Reputation: 7613

Try making the v-list-group conditional with v-if to render if the page has children. If none, just render as a list item. Example:

<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>

Upvotes: 2

Related Questions