`vuetify sidebar with a nested menu``

I am trying to enhance the vuetify sidebar menu I created by adding a submenu to a specific title. Despite editing the code and data as shown below, I am unable to see any changes reflected.

Below is the code snippet:

      <v-list flat class="mt-50">
    <v-list-item-group v-model="selectedItem" color="black">
      <v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" :to="item.link" link>
        <v-list-item-icon>
          <v-icon v-text="item.icon"></v-icon>
        </v-list-item-icon>

        <v-list-item-title v-text="item.title"></v-list-item-title>
      </v-list-item>
      <v-list-item v-for="child in items.child" :key="child.title">
        <v-list-item-title :to="child.route">{{ child.title }}</v-list-item-title>
      </v-list-item>
    </v-list-item-group>
  </v-list>

The data structure being utilized:

 selectedItem: 0,
 items: [
      { icon: 'mdi-account-key', title: 'Users', link: '/dashboard/test' },
      { icon: 'mdi-shopping', title: 'tests', link: '/dashboard/test2' },
      { icon: 'mdi-marker', title: 'tests2', link: '/dashboard/test3' },
          childs: [
            { title: 'basic', link: '/dashboard/table/basic' },
            { title: 'data', link: '/dashboard/table/data' },
            { title: 'responsive', link: '/dashboard/table/responsive' },
            { title: 'editable', link: '/dashboard/table/editable' },
            { title: 'filter', link: '/dashboard/table/filter' },
            { title: 'pagination', link: '/dashboard/table/pagination' },
            { title: 'search', link: '/dashboard/table/search' },
            { title: 'sort', link: '/dashboard/table/sort' },
            { title: 'selection', link: '/dashboard/table/selection' },
            { title: 'tree', link: '/dashboard/table/tree' },
            { title: 'custom', link: '/dashboard/table/custom' },
          ],
javascriptvue.jsvuejs2vuetify.js

Answer №1

Give this code snippet a try (add v-list-group to toggle the submenu, also note that your data only contains childs not items.child):

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      selectedItem: 0,
      items: [{icon: 'mdi-account-key', title: 'Users', link: '/dashboard/test'}, {icon: 'mdi-shopping', title: 'tests', link: '/dashboard/test2'}, {icon: 'mdi-marker', title: 'tests2', link: '/dashboard/test3'},],
      childs: [{title: 'basic', link: '/dashboard/table/basic'}, {title: 'data', link: '/dashboard/table/data'}, {title: 'responsive', link: '/dashboard/table/responsive'}, {title: 'editable', link: '/dashboard/table/editable'}, {title: 'filter', link: '/dashboard/table/filter'}, {title: 'pagination', link: '/dashboard/table/pagination'}, { title: 'search', link: '/dashboard/table/search'}, {title: 'sort', link: '/dashboard/table/sort'}, {title: 'selection', link: '/dashboard/table/selection'}, {title: 'tree', link: '/dashboard/table/tree'}, {title: 'custom', link: '/dashboard/table/custom'},],
    }
  }
})
<head>
  <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="3e5851504a7e081046">[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="57212232233e312e1765792f">[email protected]</a>/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-list flat class="mt-50">
            <v-list-item-group v-model="selectedItem" color="black">
              <!--<v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" :to="item.link" link>-->
              <v-list-item v-for="(item, i) in items" :key="i" active-class="border" class="mr-3" :ripple="false" link>
                <v-list-item-icon>
                  <v-icon v-text="item.icon"></v-icon>
                </v-list-item-icon>
                <v-list-item-title v-text="item.title"></v-list-item-title>
              </v-list-item>
              
              <v-list-group no-action sub-group>
                <template v-slot:activator>
                  <v-list-item-content>
                    <v-list-item-title>Submenu</v-list-item-title>
                  </v-list-item-content>
                </template>
                <v-list-item v-for="child in childs" :key="child.title">
                  <v-list-item-title>{{ child.title }}</v-list-item-title>
                  <!--<v-list-item-title :to="child.route">{{ child.title }}</v-list-item-title>-->
                </v-list-item>
              </v-list-group>
              
            </v-list-item-group>
          </v-list>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0c6c5d5f0829ec8">[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="fc8a899988959a85bcced284">[email protected]</a>/dist/vuetify.js"></script>
  <script>
    
  </script>
</body>

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

Unable to retrieve information from a function in Vue.js (using Ionic framework)

When attempting to extract a variable from a method, I encounter the following error message: Property 'commentLikeVisible' does not exist on type '{ toggleCommentLikeVisible: () => void; This is the code I am working with: <template& ...

typescriptvue.jsionic-framework

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

javascripthtmlcssinternet-explorerfirefox

External API data is shown in the browser console but appears as undefined on the page

Can you please lend me a helping hand? I am facing a critical issue while attempting to retrieve data from an external API using axios in NextJS (Reactjs)/TypeScript through getServerSideProps. The data fetching is successful, and the JSON is returned on t ...

javascriptreactjsnext.js

The functionality of the button in my script is limited to a single use

Below is a simple code snippet that I wrote: HTML & CSS: <!DOCTYPE html> <html> <head> <title> JavaScript Console </title> <style> button { text-align:center; ...

javascripthtmlcss

I am encountering an issue where my array of objects is not being successfully passed to the child component when utilizing VueJS 3 dynamic

I am facing an issue with mounting/unmounting 2 components in my Vue 3 app. Initially, I had implemented it following this example and it was working perfectly. <ResultSimple v-for="(result, index) in myResults" :result="result&qu ...

vue.js

Establishing a variable to serve as a function invocation

Is there a way I can assign a variable to either .prev() or .next()? Here is an example of what I am trying to do: if(x == y) var shift = '.prev()'; else var shift = '.next()'; $("li.active").removeClass('a ...

javascriptjquery

Determine if the value is present in every element of the array and return true

I am looking for a way to determine if all products have the status "Done" in their respective statusLog arrays. If any product does not contain "Done" or lacks the statusLog property altogether, then the function should return false. Although the current ...

javascriptnode.js

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly. Firstly, here is the desired functionality: 1.) Add or remove the 'active' class from the parent element when clicked 2.) When clicking inside the ...

javascriptjqueryhtmlcss

distinguishing the container component from the presentational component within react native

I just started developing apps using React Native and implemented a basic login function with the view and login logic on the same page named HomeScreen.js. However, after reading some articles online, I learned that it's recommended to separate the l ...

javascriptreactjsreact-native

Node.js: Managing multiple occurrences of the same event name for testing purposes

When it comes to unit testing using mocha, I am looking for a way to set up an asynchronous queue for handling events. Previously, I used a once() Promise to wait for events like this: import EventEmitter from 'events' import { once } from ' ...

javascriptnode.jstypescriptmocha.js

Changing an element in an array by using a specific input

With the usage of either JavaScript or Jquery, I possess an array that has been arranged in accordance with Start Date (coordinates): [{ elem: '<div id="task7">', startDate: 864, endDate: 999, order: 0 }, { elem: '<div id ...

javascriptjqueryarrayssorting

Troubleshooting a problem with Angular routing when trying to access a specific URL using

My main objective is to enable users to view products by clicking on the item itself. For each product item displayed in main.html, the URL format is like this... <a href="/products/{{ product.id }}">{{ product.title }}</a> For instance, when ...

javascriptangularjs

Delay loading background image until a specific time has passed, preventing website from fully loading

My website features a vibrant backgroundImage Slideshow that functions seamlessly. However, I am looking to reload the images of the slideshow after a specific time interval. The issue is that the website keeps loading endlessly. Once the website has com ...

javascripthtmlcssajaxweb

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

javascripthtmlsyntax-error

Encountering a 404 error when using Vue history mode in conjunction with an Express

I'm facing an issue with my Vue SPA hosted on an Express server. Whenever I use history mode and refresh the page, I encounter a 404 not found exception. I attempted to solve this problem by utilizing the connect-history-api-fallback package but unfor ...

expressvue.js

What is the best way to add a change event to a textarea that is already applied with a filtered one-way binding?

I have a text area that is already linked with a filter, so it will display the correct information when the page loads. Now, I want to update a model when the text area content changes. However, when I add a model and change event, the initial binding sto ...

javascriptangularjs

When the HTML content matches a specific value, initiate a click event to trigger

Can anyone help me troubleshoot? I've tried multiple methods but can't seem to get it right. Here's a breakdown of what I'm attempting to accomplish: #info-NUMBER-btn shows Click to display more information. #info-NUMBER CSS is set t ...

javascriptjqueryhtmlcss

The module 'SharedModule' has imported an unexpected value of 'undefined'

When working with an Angular application, I want to be able to use the same component multiple times. The component that needs to be reused is called DynamicFormBuilderComponent, which is part of the DynamicFormModule. Since the application follows a lib ...

javascriptangulartypescriptangular4-router

Mastering the use of npm and sails to create HTML-PDF files effortlessly

UPDATE: I am simplifying my question and will address any other concerns in separate posts if necessary. The initial post was too lengthy, hoping for a straightforward guide on utilizing sails to its fullest potential. Apologies. To begin with, my knowled ...

javascriptangularnpmsails.js

Personalize the bootstrap-vue styling within your Nuxt project

Currently, I am working on a nuxt project and utilizing bootstrap-vue as a styling module for my components. I am unsatisfied with the default styles provided and wish to incorporate some customization. Specifically, I aim to modify the appearance of the ...

cssvue.jsbootstrap-4nuxt.js