Unable to set q-chip color



  • I am trying to dynamically set the color for a q-chip in a list.

    ...
            <q-item v-for="(p, idx) in entries" :key="idx" @click.native="selectedEntry(p)">
                <q-item-side left>
                  <q-item-tile>
                    <q-chip dense :color="getEntryColor(idx)" :text-color="getEntryColor(idx)">|</q-chip>
                  </q-item-tile>  
                </q-item-side>
                <q-item-main :label= "p.name"/>
                <q-item-side tag="label"> 
                  {{ p.value | formatValue }}
                </q-item-side>
                <q-item-side right icon="keyboard arrow right"/>
                <q-item-separator inset/>
            </q-item>
    ...
    

    and the getEntryColor is a simple method that returns a hex code (e.g. #ffffff) for a color

    ...
      methods: {
        getEntryColor(index) {
          if (index === 0) {
            // Summary
            return '#ffffff';
          }
          let result = this.backgroundColors[index - 1];
          return result;
        },
    ...
    

    However this doesnt seem to work. Any ideas as to what could be going wrong here?



  • First off, what is there to trigger your method? I think what you are looking for is a computed property.

    If that doesn’t help, can you give us a snippet of your data? Even better, create a fiddle with your code to demonstrate your issue.

    https://jsfiddle.net/rstoenescu/waugrryy/

    Scott



  • @s-molinari I’ll prepare a jsfiddle for this example.

    Just to elaborate further, the trigger is on the “created” lifecycle hook

      created() {
        this.getUserEntries();
      },
    

    This in turn prepares the data for display of a Pie chart where the colors are populated into a backgroundColors array (as shown in the first code snippet).

    Since the entry needs to be looked up for every <q-item> I need to pass the Index to look-up the backgroundColor (hence I have this look-up set-up as a method). Is this possible with a “computed” property? (p.s. I am not using Vuex yet.).



  • What you’ve explained is still not firing the method. Try it with a computed property.

    Scott



  • Was able to figure out the issue. <q-chip color=’#ffffff’> doesn’t seem to work (i.e. hex code). However if you give a color name ‘blue’ it works.



  • Hmm… yeah. Looks like it only takes the Quasar color pallette. https://quasar-framework.org/components/color-palette.html

    Scott