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

Rearrange two elements by flipping their positions using CSS

I'm working with the following div that contains an input and a label: <div class="js-form-item "> <input type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> <label for="option-a-checkboxes-11" class=" ...

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

Automatic capitalization of menu options in Bootstrap dropdown

Is anyone else curious about why the menu items are in all caps while the markup is in lower case? What steps can be taken to prevent this from happening? https://i.stack.imgur.com/S86RO.png ...

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of

I have recently developed a thorough equality checking function. However, I am encountering an issue with the highlighted lines in my code. Does anyone have any suggestions on how to rectify this problem (or perhaps explain what the error signifies)? Her ...

"Enhancing webpage dynamics with jQuery: Exploring the

I have a beginner's question regarding my jQuery script. The script I have makes the menu move slightly to the right. My first issue is that the <a> tag seems to be receiving bottom padding, and I am unsure why or how this is happening. My secon ...

modify the navigation when router events are triggered

Is there a way to modify the destination route after the router events have been triggered in an Angular app? I am trying to implement a functionality where if the user clicks the browser back button, the navigation is redirected to the home page. However, ...

The functionality of sending form data via Express.js router is restricted

In my current project, I am developing a basic CRUD functionality in express. My goal is to utilize the express.Router() to transmit form data via the HTTP POST method. The form structure on the browser appears as follows: form.png The process was flawle ...

A dynamic 2-column website design featuring a mobile-friendly layout and an adaptable image

After searching through numerous resources on the topic, I have yet to find a solution to this particular challenge. Is it feasible to create a webpage layout with a text column on the left and an image column on the right that will seamlessly transition i ...

Approach for checking duplicates or empty input fields through PHP, AJAX, and JavaScript

Looking for a solution to validate and check for duplicate values when listing, creating, or deleting products using a REST API. I tried using rowCount in the php file to check for duplicates but I feel there might be a better approach that I am missing. N ...

Every time I attempt to build a React application, I encounter the same error message. I even checked the log file, but it keeps showing the proxy error

An error occurred in the command prompt while installing packages. This process may take a few minutes. Installing react, react-dom, and react-scripts with cra-template... Error: ERR_SOCKET_TIMEOUT The network encountered a socket timeout while trying to ...

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

Unexpected unhandled_exception_processor in Google Chrome

I keep encountering a strange uncaught exception handler in Google Chrome. After updating all follow buttons to download JavaScript asynchronously, I noticed an error in the content.js file mentioned in the exception message which advises against polluting ...

Trigger an Event Handler only after ensuring the completion of the previous event handling

When attaching an event handler to a callback, it is important to consider the timing of the actions. For example: $("someSelector").on('click',callBackHandler); function callBackHandler(){ //Some code $.ajax({ //Ajax call with succe ...

Convert JSON data from jQuery into a modal form within a div element

I am currently working on an MVC application and attempting to populate a bootstrap modal form with data from the server. My approach involves: 1) Loading a grid with various IDs, each linked to a javascript onclick function. 2) The function retrieves th ...

Using ng-repeat to iterate over forms in AngularJS

I have implemented dynamic forms using the ng-repeat directive where form fields are generated based on the userid value. The requirement is that the add user button should be enabled only when all form fields are filled. However, currently the button rema ...

Confirm the dimensions of an image prior to uploading using Node, Express, and Multer

Currently, I am developing a project using Nodejs with the express framework and ejs as the view engine. I have encountered an issue while working on image uploads. I am utilizing Multer for this task, but I need to implement a requirement where images wil ...

What is the best way to update the text of a Bootstrap-vue tooltip based on a condition?

Would appreciate some guidance on changing a Bootstrap-vue tooltip text conditionally with a checkbox. How can I access the tooltip text to make changes based on checkbox selection? Below is a Vue component where a checkbox attempts to modify a tooltip: ...

tips for transforming a javascript string into a function invocation

I am faced with the challenge of turning the string logo.cr.Button into a function call. Here is the code I'm working with: logo.cr.Button = function(){ //something } var strg = 'logo.cr.Button'; strg(); When I attempt to execute strg(); ...

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

The jQuery target is not able to locate the specified element

Why does this code snippet work in one case: jQuery(this).closest("li").find("p").text(); But when enclosed within a function, it fails to produce the desired result: jQuery.each(words, function(i, v) { jQuery(this).closest("li").find("p").text(); } ...