I am creating a list of dynamically generated buttons using v-for. I want the buttons to change color depending on whether the button entity is included in an array on the application state object. (I am using vuetify, which is why the button objects are v-btn)
<span v-for="x in ['A','B','C','D','E','F','G','H']">
<v-btn small elevation-10 :color="xIsSelected('{{x}}')?'blue':'purple'" @click="toggleX('{{x}}')" >{{x}}</v-btn>
</span>
toggleX is a method that adds or removes the value of x from the state array; xIsSelected is a method that returns true or false depending on whether x is in the state array
the method calls are working: I can invoke them from the developer tools and if I hard code the buttons and the method calls with the array values it also works. The issue is that the interpolated value of {{x}} is not being passed into the method calls, instead it is passing the literal "{{x}}". I have tried using the class syntax but could not get my head around the quotes, double quotes and back-ticks.
To pass x you just need to write:
:color="xIsSelected(x) ? 'blue' : 'purple'"
Attributes bound with v-bind (or the shorthand :) are already JavaScript expressions and they have access to x directly. There's no need to introduce any other form of templating or interpolation within that expression.