vue.js pass interpolated value to method for attribute (class) binding

Question

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.

DOH! thanks skirtle. Can you post that as an answer rather than a comment so I can mark it as the solution. — Aaron Reese
– Aaron Reese, Commented Nov 28, 2019 at 13:26

skirtle · Accepted Answer · 2019-11-28 13:40:27Z

2

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.

answered Nov 28, 2019 at 13:40

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js pass interpolated value to method for attribute (class) binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related