Troubleshooting issues with the sidebar navigation in Laravel project using Vue and AdminLTE

I successfully installed AminLte v3 via npm in my Laravel + vue project and everything is functioning properly. However, I am facing an issue when I attempt to click on the main menu item in the Side navbar that is labeled as

<li class="nav-item has-treeview">
    <a href="#" class="nav-link">
        <i class="nav-icon fas fa-users"></i>
        <p>
            Members
            <i class="fas fa-angle-left right"></i>
            <span class="badge badge-warning right">new:2</span>
        </p>
    </a>
    <ul class="nav nav-treeview">
        <li class="nav-item">
            <router-link :to="{name : 'members'}" class="nav-link">
                <i class="fas fa-user-check nav-icon"></i>
                <p>All</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersLatest'}" class="nav-link">
                <i class="fas fa-user-plus nav-icon"></i>
                <span class="badge badge-danger right">2</span>
                <p>Latest</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersPending'}" class="nav-link">
                <i class="fas fa-user-clock nav-icon"></i>
                <p>Pending</p>
            </router-link>
        </li>
        <li class="nav-item">
            <router-link :to="{name:'membersSuspended'}" class="nav-link">
                <i class="fas fa-user-lock"></i>
                <span class="badge badge-danger right">2</span>
                <p>Suspended</p>
            </router-link>
        </li>
    </ul>
</li>

Whenever I click on it, it redirects me to # router path which corresponds to

<a href="#" class="nav-link">
    <i class="nav-icon fas fa-users"></i>
    <p>
        Members
        <i class="fas fa-angle-left right"></i>
        <span class="badge badge-warning right">new:2</span>
    </p>
</a>

This section, causing the sub-menus within the main-menu not to open. The NavBar is being included from a separate vue component.

If anyone has any ideas on how to resolve this issue, please share. Thank you!

javascriptcsslaravelvue.jsadminlte

Answer №1

When you navigate to a different route instead of the adminlte routes, the treeview selector may not be able to locate the element. This is because the selector is defined before the element is mounted when you redirect the url to adminlte. The treeview feature won't function correctly in this scenario.

To solve this issue, include a mounted hook in the sidebar component.

mounted(){
   $('[data-widget="treeview"]').Treeview('init');
}

Answer №2

Remember to include require('admin-lte') after the line require('bootstrap') in the bootstrap.js file.

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

Using a nested table will override the "table-layout: fixed" property

I'm currently working on creating a tabular layout and I'm in need of the following: 2 columns with variable widths Columns that are equal in width Columns that are only as wide as necessary After some research, I discovered that by setting "t ...

htmlcsshtml-table

PHP Random Background Image Selector

I have a PHP code that is currently displaying a random header image every time the page is refreshed. While this works fine, I now need to add specific background-position css properties to some of the images. For instance, I would like 'headerimage ...

phpcss

Add a JavaScript library to the header directly from the body of a webpage, ensuring it is exclusive to a single

I am using the Google Charts JS library on a single page within my project, with external and global headers and footers. The head tags are located in a head.php file, where all required JS libraries are included. The structure of my pages is as follows: ...

phpstructurejavascripthtml-head

JavaScript function for searching YouTube videos

While browsing on stackoverflow, I came across the following code snippet: $(document).ready(function () { $("#show").click(function () { getYoutube($("#Search").val()); }); }); function getYoutube(title) { $.ajax({ type: "GET", url: yt_url ...

javascriptajaxyoutube

I find it confusing how certain styles are applied, while others are not

Working on my portfolio website and almost done, but running into issues with Tailwind CSS. Applied styling works mostly, but some disappear at certain breakpoints without explanation. It's mainly affecting overflow effects, hover states, and list sty ...

cssreactjstypescriptnext.jstailwind-css

Updating the React State is dependent on the presence of a useless state variable in addition to the necessary state variable being set

In my current setup, the state is structured as follows: const [items, setItems] = useState([] as CartItemType[]); const [id, setId] = useState<number | undefined>(); The id variable seems unnecessary in this context and serves no purpose in my appl ...

javascriptreactjstypescriptreact-hooksstate

Creating multiple div elements with changing content dynamically

I am facing an issue with a div named 'red' on my website where user messages overflow the 40px length of the div. To prevent this, I want to duplicate the 'red' div every time a message is sent so that the messages stay within the boun ...

javascriptjqueryhtmlcssajax

The SVG format quickly displays new and larger datasets on line charts without any transition effects

My goal is to create a line chart with animated transitions similar to this demo, but without the dots. I am attempting to integrate this functionality into a react component where the update method can be triggered by another component, allowing the d3 op ...

javascriptreactjsd3.jscharts

"Utilizing Bootstrap for a Dynamic Display: Implementing Multiple Carousels with Multiple Images within

I have incorporated several Bootstrap carousels on one page, each with its own unique identifier. These carousels are generated dynamically based on user interactions, such as uploading images. My goal is to display 3 images at once in each carousel. I am ...

jqueryhtmlcsstwitter-bootstrap-3carousel

"Trouble arises when event listener fails to function following an append operation

Recently, I delved into the world of HTML/CSS and jQuery in an attempt to create a simple web game. Below is a snippet of my HTML code: function playGame() { var theLine = "<div id = \"line\">"; for (var i = 0; i < 9; ...

javascriptjqueryhtml

AngularJS: How to automatically scroll to the bottom of a div

I cannot seem to scroll to the last message in my chat window. var app=angular.module('myApp', ['ngMaterial'] ); app.controller('ChatCtrl', function($window, $anchorScroll){ var self = this; self.messageWindowHeight = p ...

javascriptcssangularjsscrollangular-material

Error message: When attempting to destructure property 'nuxt' of 'this', a TypeError occurred because 'this' is undefined

When setting up my new Nuxt project, I followed the instructions provided on their website at https://nuxtjs.org/docs/get-started/installation. The process involved simply running npm init nuxt-app@latest <project-name>. However, after completing th ...

vue.jsnpmnuxt.jstailwind-css

What is the best way to retrieve the value of a select tag in Vue JS?

Delving into Vue JS has presented me with a challenge. I'm aiming to retrieve the value of the selected option. But unfortunately, I'm stuck. Despite my efforts to scour Google for answers, I have come up empty-handed. Below is a snippet of m ...

javascripthtmlvue.jsvuejs2

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

In my code, there is an ng-repeat that generates a table based on one loop, and within each row, another cell is populated based on a different loop: <tbody> <tr ng-repeat="r in roles | limitTo: 30"> <td>{{r.name}}</td> ...

javascriptangularjsangularjs-ng-repeatangular-ng-if

Isolating JavaScript Ajax codes in a Laravel 8 js file results in functionality issues

Having recently delved into the world of Ajax, I've encountered some issues. Allow me to do my best in explaining the problem at hand. Currently, I'm engaged in a Laravel 8 project. In this project, users are given the choice to select an image, ...

javascriptajaxlaravellaravel-8

Retrieve the bounding rectangle of a div that has the CSS style `display: contents` using the getBoundingClientRect

My objective is to apply styling and obtain the bounding box of an entire "row" within a CSS grid, including features like highlighting when hovering over it. To achieve the styling aspect, I make use of the display: contents property, so that the styles ...

javascripthtmlcss

How can I populate a form in Meteor with data from a MongoDB collection that was previously inserted?

Recently, I completed constructing a lengthy form field where users can enter a plethora of information. This form consists of various text and number fields, radio button sets, and checkbox groups. The data is successfully saved in a Mongo collection with ...

javascriptformsmongodbmeteor

Protractor - Easily locating elements by targeting their children

I am attempting to modify the text of the input element, but I am having trouble identifying it. The element does not have an id or any other distinguishing characteristic. Additionally, this same object is repeated multiple times in the code, making it di ...

javascriptseleniumprotractor

Update Tagged Page with axios Integration in NextJs 13

In the latest version of NextJS 13, we have the option to revalidate tagged pages by using the fetch function. However, what if I want to use axios instead of fetch? Is there a way to set tags with axios? At the moment, the code for setting tags using fet ...

javascriptreactjsnext.jsnext.js13

Enhanced Interactivity: jQuery UI Dialog Button Transforms Position upon Mouse Hover

I am utilizing the jQuery UI dialog feature and implementing buttons using jQuery in the following manner: $("#151").dialog({ autoOpen: false, autoResize: true, buttons: { "OK": function ...

jquerycssjquery-uistylesheet