Tips for enabling multiple v-list-group components to remain open simultaneously (bypassing the default Vue behavior)

Currently, I am facing an issue with Vue's default behavior where only one v-list-group can be open at a time. I am using Vuetify 2.6 and have attempted to use the multiple prop without success. Additionally, individually assigning the :value prop to render "true" for both v-list-groups has not helped either.

      <v-list-group>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>Networking</v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item
          v-for="(setting, i) in itemsettingsNetworking"
          :key="i"
          :class="{'active': openMenu == setting[0]}"
          @click="menu_change(setting[0])"
        >
          <v-list-item-title>{{ setting[0] }}</v-list-item-title>
        </v-list-item>
      </v-list-group>

      <v-list-group>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>Interfaces</v-list-item-title>
          </v-list-item-content>
        </template>
          <v-list-item
            v-for="(setting, i) in itemsettingsInterface"
            :key="i"
            :class="{'active': openMenu == setting[0]}"
            @click="menu_change(setting[0])"
          >
            <v-list-item-title>{{ setting[0] }}</v-list-item-title>
          </v-list-item>
      </v-list-group>

Answer №1

Utilize the :expand property on the v-list to prevent groups from collapsing automatically:

<v-list expand>
  <v-list-group>...</v-list-group>
  <v-list-group>...</v-list-group>
</v-list>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  template: `
    <v-app>
      <v-main>
        <v-container>
          <v-list expand>
              <v-list-group>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>Networking</v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item
          v-for="(setting, i) in itemsettingsNetworking"
          :key="i"
        >
          <v-list-item-title>{{ setting }}</v-list-item-title>
        </v-list-item>
      </v-list-group>

      <v-list-group>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>Interfaces</v-list-item-title>
          </v-list-item-content>
        </template>
          <v-list-item
            v-for="(setting, i) in itemsettingsInterface"
            :key="i"
          >
            <v-list-item-title>{{ setting }}</v-list-item-title>
          </v-list-item>
      </v-list-group>
      </v-list>
        </v-container>
      </v-main>
    </v-app>
  `,
  data(){
    const buildList = (prefix, length) => Array.from({length}, (_,i) => prefix+i)
    return {
      itemsettingsInterface: buildList('interface ', 1),
      itemsettingsNetworking: buildList('network ', 1),
    }
  }
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0b0203192d5b4315">[email protected]</a>/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfc9cadacbd6d9c6ff8d91c7">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">

  <div id="app"></div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e686b7b5e2c3066">[email protected]</a>/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addbd8c8d9c4cbd4ed9f83d5">[email protected]</a>/dist/vuetify.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of Signal R through React with aspnet/signalr integration

I found a helpful resource for incorporating SignalR into react, which you can check out here. However, it seems that the code provided does not align with current standards. The @aspnet/signalr-client has been marked as obsolete and now we are required t ...

Creating a PDF from slides using tools like mkd2pdf or wkhtmltopdf has never been easier. This

I am exploring the possibility of creating PDF files using mkd2pdf, a tool based on wkhtmltopdf. Mkd2pdf has the ability to generate PDFs from markdown content and utilizes a CSS file for styling purposes. For example: h1 { page-break-before: always; } ...

Postponing the execution of a controller until all JSON files have been fully loaded

I am currently trying to grasp the concepts of AngularJS, so my question might not be perfect. Is it feasible to delay the execution of a controller until the json files are fully loaded in a separate function? Below is the controller code: app ...

Using Vue.js to dynamically change attribute values based on a condition

I am currently displaying a v-tippy in the following manner: <label v-tippy content="My content text"> Everything is functioning as expected, but now I want to display it based on a condition show_tip == true. Is there a way to achieve th ...

Transferring data to a child component through Route parameters

Although I have come across numerous questions and answers related to my query, I still seem unable to implement the solutions correctly. Every time I try, I end up with an 'undefined' error in my props. Let's take a look at my parent compo ...

Exploring the journey of History.js and Same-Origin Policy leading to HTTPS encryption

Utilizing history.js, I am attempting to push a state change from an HTTP site like: http://www.example.com/some/resource ...to a secure site (payment page), such as: https://www.example.com/payment/for/some/resource However, Safari is throwing thi ...

MUI Autocomplete is failing to update the value when onChange event is triggered

I have successfully fetched autocomplete options from an API and it displays the pre-selected options from the API. However, I am encountering an issue where I am unable to delete or add a value (category) once selected. For an online demo, you can check ...

Using a custom module in node.js to retrieve data from a mysql database

How can I retrieve select query results? I am currently getting empty or null responses. Despite attempting callback logic and using the callback function as suggested in some articles, I have yet to have any success. All of the code for my Custom Module ...

Problem with Java class in GWT JsInterop

Having some trouble with JsInterop while wrapping up a piece of JavaScript code. The JavaScript code looks like this: com = { gwidgets: {} }; com.gwidgets.Spring = function () { this.name = "hello"; }; com.gwidgets.Spring.prototype.getName = ...

Can someone please share the steps on how to insert a new row into a PrimeNg DataTable component

I am currently working on enhancing a table by adding a new row underneath the existing data list. This new row will contain a save button and allow users to insert information, such as saving a phone number. While I have indicated where the new row should ...

Tips for obtaining the most recent HTML element in Angular

I was able to include HTML content in an Angular (7) UI using the DomSanitizer this.sanitizer.bypassSecurityTrustHtml("htmlstr") Once the content is sanitized and displayed in the HTML view, users have the ability to modify the values as desired ...

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

Using Try and Catch effectively - tips and strategies

As I delve into learning JavaScript on my own, one topic that caught my attention is the try/catch structure. The tutorial I came across only covers how to implement it, but lacks in explaining its practical applications. Is there anyone who can shed som ...

"Hover over the image to see it enlarge and reveal text displayed on top using CSS3

I have been working on creating a responsive image page for my website. I've managed to make the images responsive and centered, no matter the size of the browser window. However, I encountered an issue where when I hover over an image, it enlarges a ...

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

Is it possible for Nextjs routing catchAll to coexist with a slug folder within a route?

When converting my pages to ISR, I encountered an issue with handling params and dynamic routes. One example is where article/?pageNumber=2 needs to be rewritten as article/2 in middleware for improved performance. However, this change in routing structure ...

How can I retrieve and store session information during the authorization event in Socket.io with express-sessions?

I have set up a websocket using Socket.io and the express 4 framework on a node.js server. Currently, I am working on implementing an authorization step for my users when they are using the websocket. Upon a user connection, a token is passed as a query ...

Prevent the propagation of a particular CSS class's inheritance

I need to make modifications to an existing HTML5 app that features two unique themes. Here's an example of the current structure: <body class="theme1 theme2"> <div id="div1">I'm satisfied with both themes</div> <di ...

How can you display '<>' characters in a QLabel and set text accordingly?

In my PySide2 (similar to PyQt5) project, I am facing an issue with setting text in a QLabel that includes characters like '<' and '>'. These characters seem to disappear because they are used for font modifications. I have tried ...

What are the reasons behind Jquery's decreased speed performance in Internet Explorer?

My ASP.NET page is quite intricate and heavily depends on jQuery for manipulating the DOM without using AJAX. Interestingly, I've observed that the page performs better in Mozilla browsers like Firefox compared to Internet Explorer 7 or 8. Could it b ...