Change color select

[Joma3565]

Hi,

I have a problem, i would change the background-color and text-color of a q-select depend of the option. I´ve tried differents ways but i can’t. Someone can help me with this, please???

Mi code is this:
<q-select id=“opcion2” v-model=“model” :options=“options” color=“teal” options-selected-class=“text-green-10” @input=“cambio”>
<template v-slot:option=“scope”>
<q-item v-bind=“scope.itemProps” v-on=“scope.itemEvents”>
<q-item-section >
<q-item-label v-html=“scope.opt.label” />
<q-item-label id=“opcion” caption>{{ scope.opt.description }}</q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>

Js:
cambio(){
if (document.getElementById(‘opcion’).value==‘app’){
console.log(‘Opción 1’)
}
else{
console.log(‘Opción 2’)
}
}
model: null,
options: [
{
label: ‘Aplicado’,
value: ‘app’
},
{
label: ‘No Aplicado’,
value: ‘napp’
}
]

[beets]

@Joma3565 you can bind color and options selected class props:

:color=“MyColorComputedValue” :options-selected-class=“MyOptionsSelectedClassComputedValue”

And then in your js computed options, check the value and return a string like “teal”

[Joma3565]

@beets Thanks, I was finally able to do it, but i found another problem, when i change the bg-color, only change in the label and i want that change in the q-select

[beets]

@Joma3565 Can you post your current code? It’s hard to tell which property you’re using to change the color.

[Joma3565]

@beets Yes, here you have (sorry for my english) ```

<script>
cambio(){
if (this.model==‘app’){
console.log(‘Opción 1’)
document.getElementById(‘opcion’).className= “q-my-auto”
document.getElementById(‘opcion’).style.backgroundColor= ‘#f1fff5’
document.getElementById(‘opcion’).style.color= ‘#93cda4’
}
else if (this.model==‘napp’){
console.log(‘Opción 2’)
document.getElementById(‘opcion’).style.backgroundColor=’#fff1f1’
document.getElementById(‘opcion’).className= “q-my-auto”
document.getElementById(‘opcion’).style.color=’#bd1111’
}
}

<template>
<q-td key=“fat” :props=“props”>
<q-select id=“opcion” transition-show=“flip-up” transition-hide=“flip-down” emit-value map-options v-model=“model” :options=“options” options-selected-class=“text-green-10” dense @input=“cambio”>
</q-select>
</q-td>

[Joma3565]

@beets Thanks for your help, i found my mistake and I could already solve it

[miguelrod.dev]

Como arreglaste tu problema @Joma3565 ?