@beets Thanks for your help, i found my mistake and I could already solve it
Best posts made by Joma3565
-
RE: Change color select
Latest posts made by Joma3565
-
RE: Change color select
@beets Thanks for your help, i found my mistake and I could already solve it
-
RE: Change color select
@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> -
RE: Change color select
@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
-
Change color select
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â
}
]