adding @click event to bootstrap4 dropdown in nuxtjs

Question

I have this bootstrap 4 dropdown ( fiddle here ) where I want to change its button's background color @click. But when I add the click event it no longer hides the dropdown menu. This 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;
}

What is wrong my code? And also how can I change background color of my dropdown button without breaking its original functionality?

Answer 1

I've corrected your code in this fiddle. The solution I have used is based on this post. Basically, the style you included in your question was never used. What you could do is bind a custom style( :style="test? clickedBtn: null" ) in the button tag and use the code below. So in this case clickedBtn will only be applied whenever test is true.

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

I'll leave the answer above, but in case that you want to only modify style for when the button is on focus or when the dropdown is shown, customize or override the bootstrap's default style. You can paste the following CSS code into your stylesheet. See the fiddle here .

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