`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

Question

`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

As a newcomer to Vuetify and Vue in general, I am struggling to solve a specific issue. I need to create multiple sub-groups where only one option can be selected within each "parent" list.

Consider an array of cats:

options:["Crookshanks", "Garfield", "Leeroy"]

These cats are divided into 2 sub-groups (see pseudo code below)

subgroup 1
  Crookshanks
  Garfield
subgroup 2
  Leeroy

I have successfully managed to display the text content of the selected item, but now I want to implement some visual changes such as highlighting or adding a check mark to indicate the selection. This should be a toggle effect where only one item can be selected at a time, clearing the effect on the previously selected item when a new one is chosen. Unfortunately, manually setting an active class did not work for me (I suspect it's not supported for sub-groups):

<v-list-item 
active-class="selectedCat">

If you'd like to experiment with this concept, check out this Codepen link. Your assistance would be greatly appreciated!

javascript vue.js vuetify.js

Answer 1

Answer №1

To effectively highlight the selected element, utilize the v-list-item-group component. Consider the following example:

<template>
  <div id="app">
    <div>
      fictionalSelected = {{ fictionalSelected }}
    </div>
    <div>
      realSelected = {{ realSelected }}
    </div>

    <v-app id="inspire">
      <v-card class="ma-1" width="700">
        <v-list>
          <v-list-group prepend-icon="pets">
            <template v-slot:activator>
              <v-list-item-title>CATS</v-list-item-title>
            </template>
            <v-list-group no-action sub-group>
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>Fictional</v-list-item-title>
                </v-list-item-content>
              </template>

              <v-list-item-group v-model="fictionalSelected" @change="fictionalChanged">
                <v-list-item v-for="cat in fictionals">
                  <v-list-item-title>{{ cat }}</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list-group>

            <v-list-group sub-group no-action>
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>Real</v-list-item-title>
                </v-list-item-content>
              </template>
              <v-list-item-group v-model="realSelected" @change="realChanged">
                <v-list-item v-for="cat in reals">
                  <v-list-item-title>{{ cat }}</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list-group>
          </v-list-group>
        </v-list>
      </v-card>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    fictionals: ['Crookshanks', 'Garfield'],
    fictionalSelected: null,
    reals: ['Leeroy'],
    realSelected: null,
  }),
  methods: {
    fictionalChanged() {
      console.log('fictionalChanged');
      this.realSelected = null;
    },
    realChanged() {
      console.log('realChanged');
      this.fictionalSelected = null;
    },
  },
};
</script>

Answer 2

To effectively highlight the selected element, utilize the v-list-item-group component. Consider the following example:

<template>
  <div id="app">
    <div>
      fictionalSelected = {{ fictionalSelected }}
    </div>
    <div>
      realSelected = {{ realSelected }}
    </div>

    <v-app id="inspire">
      <v-card class="ma-1" width="700">
        <v-list>
          <v-list-group prepend-icon="pets">
            <template v-slot:activator>
              <v-list-item-title>CATS</v-list-item-title>
            </template>
            <v-list-group no-action sub-group>
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>Fictional</v-list-item-title>
                </v-list-item-content>
              </template>

              <v-list-item-group v-model="fictionalSelected" @change="fictionalChanged">
                <v-list-item v-for="cat in fictionals">
                  <v-list-item-title>{{ cat }}</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list-group>

            <v-list-group sub-group no-action>
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>Real</v-list-item-title>
                </v-list-item-content>
              </template>
              <v-list-item-group v-model="realSelected" @change="realChanged">
                <v-list-item v-for="cat in reals">
                  <v-list-item-title>{{ cat }}</v-list-item-title>
                </v-list-item>
              </v-list-item-group>
            </v-list-group>
          </v-list-group>
        </v-list>
      </v-card>
    </v-app>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: () => ({
    fictionals: ['Crookshanks', 'Garfield'],
    fictionalSelected: null,
    reals: ['Leeroy'],
    realSelected: null,
  }),
  methods: {
    fictionalChanged() {
      console.log('fictionalChanged');
      this.realSelected = null;
    },
    realChanged() {
      console.log('realChanged');
      this.fictionalSelected = null;
    },
  },
};
</script>

`How can I customize the appearance of individual selected <v-list-item> across various sub-groups?`

Answer №1

Similar questions

Tips for eliminating the left and bottom border in a React chart using Chart.js 2

Webpack Progress Vue Plugin

Is there a way in WebStorm to create a "virtual" folder for conveniently organizing and hiding config files, or perhaps a feature that allows for easily toggling visibility of certain files?

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having issues with ng-repeat not displaying any content

Creating PropTypes from TypeScript

Avoid invoking a TypeScript class like a regular function - _classCallCheck prevention

Using Javascript to retrieve form data from a separate file

Diverse Browser Outcomes with jQuery CSS

Binding textarea data in Angular is a powerful feature that allows

Express & React: Be cautious of client checksum and style while server-side rendering

How can you locate the position of identified text on a webpage to accurately place the mouse cursor there?

What is the origin of function parameters in javascript?

What is the best way to transfer a value from a function to a variable in VueJs?

Processing XML Files Using Nodejs

Exploring X3DOM nodes using d3.js

Top choices for creating animations using THREE.JS

Retrieving text from a draggable div using jQuery

At what point is the ajax call considered fully executed?

When removing an item using its key, the vue component does not automatically refresh