Unable to set q-chip color

[venkyvb]

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?

[s.molinari]

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

[venkyvb]

@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.).

[s.molinari]

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

Scott

[venkyvb]

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.

[s.molinari]

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

Scott