How to implement the @click event on a Bootstrap4 dropdown menu in a Nuxt.js project

Question

How to implement the @click event on a Bootstrap4 dropdown menu in a Nuxt.js project

I am working with a Bootstrap 4 dropdown that I want to customize by changing its button's background color when clicked. However, when I tried to add the click event, the dropdown menu no longer hides. Below is my code:

//template
<div class="dropdown" :class="{ test: test }">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="testing">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

//script
  methods: {
    testing(){
      this.test = !this.test
    }
  }
// css
.isTest{
  background-color: blue;
}

I need help fixing my code. How can I change the background color of the dropdown button without affecting its original functionality?

javascript html css bootstrap-4 drop-down-menu

Answer 1

Answer №1

I have made corrections to your code in a JS fiddle found here. The solution I provided is referenced from a post on Stack Overflow. It seems the style you originally included in your question was not being utilized. To fix this, you can bind a custom style like

:style="test ? clickedBtn : null"

within the button tag and implement the code below. This way, the clickedBtn style will only be applied when test is true.

new Vue({
  el: "#app",
  data: {
    test: false,
    clickedBtn: {
      background: "blue",
      color: "white"  
    }
  },
  methods: {
    testing(){
        this.test = !this.test
      console.log('hasan')
    }
  }
})

The previous answer stands, but if you're looking to customize the style only when the button is focused or when the dropdown is visible, you can override bootstrap's default styles. You can add the following CSS code to your stylesheet. Check out the updated JS fiddle here.

.myBtn:focus{
  background-color: blue !important;
}

Answer 2

I have made corrections to your code in a JS fiddle found here. The solution I provided is referenced from a post on Stack Overflow. It seems the style you originally included in your question was not being utilized. To fix this, you can bind a custom style like

:style="test ? clickedBtn : null"

within the button tag and implement the code below. This way, the clickedBtn style will only be applied when test is true.

new Vue({
  el: "#app",
  data: {
    test: false,
    clickedBtn: {
      background: "blue",
      color: "white"  
    }
  },
  methods: {
    testing(){
        this.test = !this.test
      console.log('hasan')
    }
  }
})

The previous answer stands, but if you're looking to customize the style only when the button is focused or when the dropdown is visible, you can override bootstrap's default styles. You can add the following CSS code to your stylesheet. Check out the updated JS fiddle here.

.myBtn:focus{
  background-color: blue !important;
}

How to implement the @click event on a Bootstrap4 dropdown menu in a Nuxt.js project

Answer №1

Similar questions

Angular predictive text selection menu

Build a row within an HTML table that is devoid of both an ID and a class

The Ajax request relies on the initial conditions (then)

"Maximizing Data Visualization with Fusion Chart's Caption and Subcaption in

What could be the reason for my CSS selector with :target not functioning properly?

Tips for saving a value within a jQuery function for future use in a different function

Utilizing multiple dropdown buttons in navigation menu items with Bootstrap 4

Placing a new item following the child of a different element

The reflow feature in Highcharts does not properly update the width of the container for High

Steps for creating a fixed menu bar that remains stationary while scrolling

Tips for hiding the overflow scrollbar on Microsoft Chrome when there is no content to scroll

Is there a proper way to supply createContext with a default value object that includes functions?

What steps can be taken to prevent a Javascript Timeout Exception when attempting to launch a new browser window?

Launching shuttles using HTML and JavaScript

Determining the clicked node in a JavaScript environment

Animate the transition effect as soon as the block is displayed

CSS Trick: Applying first-of-type selector to specific instances of a div

"Implementing a nested drawer and appbar design using Material UI, along with incorporating tabs within

The CSS element is covering up the Xpath element

Expanding background images smoothly during transition with varying image dimensions