在 nuxtjs 中将 @click 事件添加到 bootstrap4 下拉列表

Question

我有这个 bootstrap 4 下拉菜单 (fiddle here)，我想在其中更改其按钮的背景颜色 @click。但是当我添加点击事件时，它不再隐藏下拉菜单。这是我的代码：

//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;
}

我的代码有什么问题？以及如何在不破坏其原始功能的情况下更改下拉按钮的背景颜色？

Answer 1

我已在this fiddle 中更正了您的代码。我使用的解决方案是基于this 的帖子。基本上，您在问题中包含的样式从未使用过。您可以做的是在按钮标签中绑定自定义样式（:style="test ? clickedBtn : null"）并使用下面的代码。所以在this 的情况下，clickedBtn 只会在test 为真时应用。

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

我将在上面留下答案，但如果您只想在按钮处于焦点或显示下拉菜单时修改样式，请自定义或覆盖引导程序的默认样式。您可以将以下 CSS 代码粘贴到样式表中。见小提琴here。

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