Vue Bootstrap 下拉项颜色改变

Question

你好，我正在用 Vue 制作一个垂直菜单 Bootstrap 4

 <b-dropdown id="dropdown-dropright" no-caret dropright :text="result.title" variant="primary" class="drop"  v-for="result in resultsmenu.slice(0,4)" :key="result.id">
      <span  v-on:click="selectedEntry">
    <b-dropdown-item  class="slide-in-right"  v-for="submenu in result.submenu" :key="submenu"><nuxt-link  :prefetch="true" :to="submenu.slug">{{submenu.title}}</nuxt-link></b-dropdown-item>
      </span>
  </b-dropdown>

我正在尝试更改下拉项目的颜色，就像一开始所有的下拉项目都是黑色的，如果我点击其中一个下拉项目，其他下拉项目就会变成白色颜色，但点击的颜色保持黑色。

希望有人有办法帮助我谢谢

Answer 1

您可以尝试将 class 绑定到下拉项：

new Vue({
  el: '#demo',
  data() {
    return {
      resultsmenu: [{id: 1, title: 'AAA', submenu: [{title: 'aaa', slug: ''}, {title: 'bbb', slug: ''},{title: 'ccc', slug: ''}]}],
      active: null
    }
  },
  methods: {
    selectedEntry(i) {
      this.active = i
    }
  }
})

.dark {
  background: black;
}
.light {
  background: white;
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
  <b-dropdown 
    id="dropdown-dropright" no-caret dropright 
    :text="result.title" 
    variant="primary" 
    class="drop"  
    v-for="result in resultsmenu" 
    :key="result.id"
  >
    <span>
      <b-dropdown-item  
        class="slide-in-right dark"  
        v-for="(submenu, i) in result.submenu" 
        :key="i"
        :class="i === active ? 'light' : ''"
        v-on:click="selectedEntry(i)"
      >
        <a :href="submenu.slug">{{submenu.title}}</a>
      </b-dropdown-item>
    </span>
  </b-dropdown>
</div>

Vue Bootstrap 下拉项颜色改变

Vue Bootstrap dropdown items color changing

css

vue.js

vuejs2

nuxt.js

bootstrap-vue