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’
    }
    ]



  • @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”



  • @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 Captura1.PNG Captura.PNG



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



  • @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>



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


Log in to reply