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
