adding @click event to bootstrap4 dropdown in nuxtjs

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?

https://stackoverflow.com/questions/66790912/adding-click-event-to-bootstrap4-dropdown-in-nuxtjs March 25, 2021 at 07:31AM