CODEWITHSUNDEEP
bootstrap-vue
Tals
Tals

Reputation: 340

bootstrap vue dropdown creates a button without data-v-XXX

I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.

is there any workaround?

<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
  <b-dropdown-item-button>test 1
  </b-dropdown-item-button>
  <b-dropdown-item-button>test 2
  </b-dropdown-item-button>
</b-dropdown>

<style scoped>
  .btn-clean {
      color: #337ab7;
  }
</style>

Generated code:

<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064=""> 
   <button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
   <div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
       <button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
      </button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
      </button>
   </div>
</div>

without "data-v-25a41064" on the button id="ddown2__BV_toggle_"

Upvotes: 2

Views: 831

Answers (2)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Vue-loader only applies scoped styles to the root element of child components.

You need to use the /deep/ CSS selector to target inside child components.

See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

Upvotes: 0

Kimberley
Kimberley

Reputation: 459

I came across the same issue today. It helped for me if I put the styling a component higher.

Upvotes: 2

Related Questions