Ion-button color attribute from variable

i setup new colors thru scss.
and if I use the literal name in the color field, it works

color=“xxx”

BUT i want to generate the content with a v-for, so take the name of the color from an array of colors

color="{{colors[index}}"

this doesn’t work
I use a similar field (defined in the data section) to provide the text of the button, and its id
id="{{labels[index]}}
and this works…

the names of the colors are valid and work if hard coded…

in package.json
“@ionic/vue”: “^5.4.0”,

 data(){
    const colors: Array<string> = ['xxx','yyyy', 'zzzz', 'qqqq'];
    const labels= ["rrrr","eeee", "yyyy", "nnnn"];
    return {colors, labels }
  }

template part

     <div id="container" v-if="gender === '1'">
          <ion-row>
          <ion-button
            id="{{labels[0}}"
            color="xxx"
            @click="setTarget(  labels[0]  )">
            {{labels[0]}}
          </ion-button>
          <ion-button
            id="{{labels[1}}"
            color="{{colors[1]}}"
            @click="setTarget(  labels[1]  )">
            {{labels[1]}}
          </ion-button>
          </ion-row>

1st one works, second one fails

when I hover over the button in the developer window in chrome, I see

which means it didn’t do the substitution for the {{}} for the ID or the color

what did I do wrong?

it DID do the substitution for the text value of the button
and works in my onclick… so I have addressibility to those variables

here is the hover over the one with the literal

1 post - 1 participant

Read full topic