VueJs : dropdown items background color

Question

Trying to understand how style works in web dev (VueJS) and I'm struggling with some things :

I'm displaying (dynamicly) some dropdown (colored) filled with dropdown-item.

I would like to change the backcolor of those dropdown-item. Can't really understand how style works.

My (logical) idea would be to inherit from the parent-dropdown ?

Code of the dropdown :

<b-dropdown variant="danger" size="sm" v-for="item in rubriquesFullyLoaded" :key="item.id"  v-bind:text="item.libelle" id="ddown1" class="m-md-1" v-if="item.libelle == 'Services Magasins'">
       <b-dropdown-item variant="danger" v-on:click="maj(enfant, 1)" v-for="enfant in item.childs" :key="enfant.id"  v-bind:text="enfant.id" v-if="item.childs !== null">
         {{ enfant.libelle }}
       </b-dropdown-item>
</b-dropdown>

Thanks !

Can you post your complete code so I can understand and solve your problem — Arshiya Khanam
– Arshiya Khanam, Commented Nov 30, 2018 at 10:42
Those are transparent by default I think, have you tested overriding? .dropdown-item { background-color: rebeccapurple; } — wbdlc
– wbdlc, Commented Nov 30, 2018 at 10:43
@ArshiyaKhanam Isn't the code provided enough ? What more would you need ? Thanks — Cesar
– Cesar, Commented Nov 30, 2018 at 11:06
@David.J Yep, I've already tried that but with that method, all my .dropdown-item will be purple, i need them to be like the dynamic parent (b-dropdown) — Cesar
– Cesar, Commented Nov 30, 2018 at 11:08

Moumen Soliman · Accepted Answer · 2018-11-30 10:55:53Z

2

If you're using vue-bootstrap, you will need to add your style is override the library style in App.vue, in the parent component & if you need to update styling there is a dynamic classes in vue you can do it by these classes, for example:

//example for bind styling
<div v-bind:style="theVariable ? styleObject : ''"></div>

//example for dynamic class
<div :class="theVariable ? theNewClass : theOldClass"></div>

data: {
  return {
   theVariable: true,
   styleObject: {
     color: 'red',
     fontSize: '13px'
   }
  }
}

answered Nov 30, 2018 at 10:55

Moumen Soliman

1,6941 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cesar Over a year ago

Yes, I'm using Vue-boostrap, thanks for your answer I will dig into this !

Cesar Over a year ago

Ok it works great with v-bind:style. Can find infos in there : vuejs.org/v2/guide/class-and-style.html

Moumen Soliman Over a year ago

That's great to here, I'm using vue-bootstrap so I know what you're talking about, good luck

Collectives™ on Stack Overflow

VueJs : dropdown items background color

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related