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

Question

我有這個 bootstrap 4 下拉列表（此處為 fiddle ），我想在其中更改其按鈕的背景顏色 @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

我已經在這個小提琴中更正了你的代碼。 我使用的解決方案基於這篇文章。 基本上，您在問題中包含的樣式從未使用過。 您可以做的是在按鈕標簽中綁定自定義樣式（ :style="test? clickedBtn: null" ）並使用下面的代碼。 所以在這種情況下clickedBtn只會在test為真時應用。

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

我將在上面留下答案，但如果您只想修改按鈕焦點或顯示下拉菜單時的樣式，請自定義或覆蓋引導程序的默認樣式。 您可以將以下 CSS 代碼粘貼到您的樣式表中。 看這里的小提琴。

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