CODEWITHSUNDEEP
vue.jsvuetify.js
theJ
theJ

Reputation: 395

Vutify list group make parent clickable

Is there a way to make the parent, in the case courses clickable, without toggling the course items below on/off and only have the arrow, to the right, show/hide the child items. At the moment I have just added a router link to the parent item in the list if it has a path.

menu

      <v-list-group
        v-if="item.children"
        v-model="item.active"
        :key="item.title"
        :prepend-icon="item.icon"
         style="border-top: solid; border-color: #004d3d; border-width: thin;"
      >
        <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title class="text">
                <router-link v-if="item.path" :to="item.path">{{ item.text }}</router-link>
                <span v-else>{{ item.text }}</span>
              </v-list-item-title>
            </v-list-item-content>
        </template>

        <template v-for="child in item.children">
          <v-list-item
            :key="child.title"
            :to="child.path"
            v-if="$store.getters['session/hasPermissionKey'](child.permissionKey)"
          >
            <v-list-item-action>
              <v-icon>{{ child.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title class="text">
                {{ child.title }}
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </template>
      </v-list-group>

Upvotes: 1

Views: 1444

Answers (2)

Eike Baran
Eike Baran

Reputation: 1

As i had the same problem myself and did not find it too intuitive at first how to get this together i just want to add a small snippet how the wished element & behavior look in a few lines of code, to make it easier to comprehend for others:

<v-list-group value="Courses" prepend-icon="mdi-view-list">
  <template v-slot:activator="{isOpen, props}">
    <v-list-item
       title="Courses"
       @click="router.push(FILL_ME_IN)"
    >
      <template v-slot:append>
        <v-icon
          v-bind="props"
          :icon="isOpen?'mdi-chevron-up':'mdi-chevron-down'"
        />
      </template>

    </v-list-item>
  </template>
  ...
 </v-list-group>

Upvotes: 0

Jordan
Jordan

Reputation: 2371

Yes. I actually did something similar with expansion panels recently.

What I needed to do was to allow the expansion panel header to be clickable while only expanding the panel using the icon.

To do this, I bound @click.stop="myMethod instead of @click

The .stop modifier prevents the click event from the component from bubbling up.

This is not to be confused with the .prevent modifier which is used to prevent the default browser behaviour (like a form submit or reload) from occurring.

You'll still need to bind the activators to the icon itself though, or a @click.stop method on the icon to toggle opening and closing the children.

Upvotes: 0

Related Questions