将@click事件添加到nuxtjs中的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. The solution I have used is based on 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 情况下的代码 clickedBtn 仅在 test 为真时应用。

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

我会把答案留在上面，但如果您只想修改按钮处于焦点或显示下拉列表时的样式，请自定义或覆盖 bootstrap 的默认样式.您可以将以下 CSS 代码粘贴到您的样式表中。见 fiddle here.

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

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

adding @click event to bootstrap4 dropdown in nuxtjs

html

javascript

css

drop-down-menu

bootstrap-4