Changing background colors of dropdown items in VueJs

Question

Changing background colors of dropdown items in VueJs

Currently grappling with understanding the intricacies of styling in web development (specifically VueJS). I am facing some challenges:

I am dynamically rendering colored dropdowns filled with dropdown items.

I am struggling to figure out how to change the background color of these dropdown items. The concept of styling is eluding me at the moment.

Would it make sense for me to inherit styles from the parent dropdown?

Here's the code snippet for 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>

Thank you!

html css vue.js

Answer 1

Answer №1

If you are utilizing vue-bootstrap, it is important to include your own custom styling to override the default library styles in App.vue, specifically within the parent component. If you need to make any style updates using dynamic classes in Vue, you can achieve this by implementing the following examples:

//example for binding 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'
   }
  }
}

Answer 2

If you are utilizing vue-bootstrap, it is important to include your own custom styling to override the default library styles in App.vue, specifically within the parent component. If you need to make any style updates using dynamic classes in Vue, you can achieve this by implementing the following examples:

//example for binding 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'
   }
  }
}

Changing background colors of dropdown items in VueJs

Answer №1

Similar questions

Guide to modifying the behavior of a dynamic dropdown menu

Executing script once the DOM has completed loading

Unlock the power of VueJS with advanced checkbox toggling for array data

"Sortable elements in Getuikit 3 do not trigger the 'on moved' event

Is there a way to disable the feature of saving input values?

Creating responsive data tables in HTML

Switching JSON data when clicked in Angular 2

What is the best way to retrieve the name of a dynamic form in a Controller

Revamping the login interface for enhanced user

Fixing the background transition issue on Safari is a common problem that many users encounter

What solutions are available for resolving the devServer issue in webpack?

Adding a class to individual elements generated through a v-for loop: a step-by-step guide

Achieving equal height divs using Bootstrap

Execute a task prior to invoking a different task

What causes the empty gap to appear during animated transitions between two 'div' elements?

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

Fixing Timezone Issue in VueJs 3 with Axios POST Request

Ways to populate dynamic choices for multiple Select boxes within an ng-repeat loop

Nuxt - Guarding Against HTML Injection with Webpack's Plugin

What is the best way to call a JavaScript function within a PHP echo statement that outputs a <div> element?