Guide on hiding the sidebar in mobile view and enabling toggling on click for both mobile and other devices with the use of vue.js and bootstrap4

I need assistance with transitioning my code from pure Bootstrap4 and JavaScript to Vue.js. When I tried implementing it in mobile view, the sidebar is not showing. Below is the code snippet that I am trying to change for Vue.js, but I keep encountering an error stating "toggleClass is not defined."

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
 });

Here is the template link that I am using.

Attached is a screenshot of the error:

https://i.stack.imgur.com/sVdAV.png Can anyone help me understand how to resolve this issue and provide an alternative solution? Thank you in advance.

vue.jsbootstrap-4vuejs2sidebarvuejs3

Answer №1

I finally found the answer I was looking for:

import jquery from 'jquery';
mounted() {
      jquery("#menu-toggle").click(function (e) {
        e.preventDefault();
        jquery("#wrapper").toggleClass("toggled");
      });
}

Implementing this code solved my problem.

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

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin. I comprehend that to generate an index.html file within my dist directory, the following configurations ...

javascriptwebpackvue.jshtml-webpack-plugin

Interactive Vue components with dynamic children and sub-children

In my Vue application, I have a component called Address.vue which contains a child component called Contact.vue. One address can contain multiple components What I have accomplished: I have implemented the functionality in the Address.vue component t ...

javascriptvue.jsecmascript-6vuejs2

Attaching identical class and event handlers to numerous dynamically created elements

I am facing a challenge with the following HTML structure: <a href="#" @click.prevent="toggleClass">Show/Hide</a><br> <li :class="{myClass: showItems}">Item 1</li> <a href="#" @click.prevent="toggleClass">Show/Hide< ...

javascriptvue.js

Guide for Displaying Three Cards Side by Side using Bootstrap Grid System

I am facing an issue while attempting to display 3 cards in a row using the Bootstrap grid system. The problem arises when I use a Django loop, as each card is being displayed in a separate row instead of side by side as intended. I have tried implementing ...

htmldjangobootstrap-4

Configuring Visual Studio Publish settings for Single Page Applications deployed on Azure

I have set up my Azure App Service and downloaded the publish profile settings to use FTP for publishing my single page app to Azure. However, I am interested in configuring this process in Visual Studio similar to how one would publish a .Net application ...

c#visual-studioazurevue.jsazure-web-app-service

Turning on ESlint in the vendor directory for Laravel and VueJs

Is there a way to activate eslint within the Laravel vendor folder? Our primary development work is done within the vendor folder of our project, which relies on Laravel packages. I have successfully set up and configured eslint at the root level of the p ...

laravelvue.jsphpstormeslint

Obtaining the currentTarget object through a click event

When using Jquery to retrieve an object from the current target, it works perfectly. However, I would like to achieve the same behavior with VueJs, but VueJs returns a DOM instead of an object. Using Jquery <a onclick="test(this)" type="button"&g ...

vue.js

State management using Vuex: dynamically updating values in components based on their indices and sharing the updated values with other components

I've hit a roadblock and I need your assistance. I've been struggling for the past few days with mutations and actions in Vuex, but the solutions I've found online don't quite fit my specific case. Here's the situation: Setup: - T ...

vue.jsvuejs2vuex

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

javascriptvue.jsaxios

Title Tooltip Capitalization in Vue.js: A Guide

Is there a way to change only the first letter of the title tooltip (from a span) to be capitalized? I attempted using CSS with text-transform: capitalize;, however, it didn't have the desired effect. <template lang="pug"> .cell-au ...

javascriptvue.jspug

Enhancing the Search Form Minimum Width in Bootstrap 4 Navbar

Looking for a way to create a search form with a width of 100% and a minimum width within a Bootstrap 4 navbar? Check out my code snippet here. <nav class="navbar navbar-expand-md navbar-light bg-faded"> <a href="/" class="navbar-brand">Brand& ...

csstwitter-bootstrapbootstrap-4navbar

Using VueJs to dynamically adjust the width of an element based on another element

I’m currently developing a Trivia app that features an <h1> element which dynamically changes every 10 seconds. My goal is to align the width of a radio button group component (b-form-group from Bootstrap-Vue components) with the width of the <h ...

vue.jsvue-componentbootstrap-vue

Mastering the art of tab scrolling in VueJS using Bootstrap-vue

Currently, I am working on a VueJS project that utilizes bootstrap-vue. The issue I am facing is that when rendering a list of tabs, it exceeds the width of its parent container. To address this problem, I aim to implement a solution involving a set of but ...

javascriptvuejs2bootstrap-4bootstrap-vue

405 error: NGINX blocking POST method in Django DRF Vue.js application

I have encountered a strange issue while building my ecommerce site. Everything seems to be working fine, except for the forms. When attempting to post content, I keep receiving a 405 method get not allowed error. It's confusing as I am trying to use ...

javascriptdjangovue.jsnginxdjango-rest-framework

A tutorial on how to switch classes between two tabs with a click event in Vue.js

I am having an issue with my spans. I want to implement a feature where clicking on one tab changes its color to red while the other remains gray. I have tried using class binding in my logic but it's not working. How can I solve this problem and make ...

javascriptvue.jsvuejs2vue-component

Using Vue router to dynamically define the query key when calling router.push()

Hello, I am relatively new to using Vue and have been working on a project that involves making GET requests based on the current URL. In one of my functions, I am trying to dynamically set the value of filterType in the query key within the router.push() ...

vue.js

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

javascriptcsswebpackvue.jshtml-webpack-plugin

Ensuring the correct order of script, template, and style tags in Vue using a linter

Looking to implement a new linter rule that verifies the sequence of tags: <script>, <template>, and <style>. By default, Vue places <template> first, but I believe <script> should come first as it holds more importance. It w ...

vue.jseslintlint

Using Vue.js to submit a form in Laravel and redirecting with a flash message

I am facing an issue where I have two components named Index and Create, loaded from separate blade files. The challenge is passing a flash message as a prop between these components due to their file separation. How can I redirect after submitting a form ...

javascriptlaravelvue.js