[Vuejs]-How do I bind a style to my v-for loop in this example?

by

2👍

The output of your template will be something like this:

<td style="endstage">
  endstage
</td>

I’m assuming that isn’t what you want as endstage is not a valid value for the style attribute. Note that the computed property isn’t being used at all here. It is just trying to set the style to the string 'endstage'.

I guess what you’re trying to do is this?

<td v-for="steps in item.steps" :style="this[steps.name]">

Assuming steps.name is 'endstage', this will use the object returned by the computed property endstage as the style. this[steps.name] evaluates as this['endstage'], which is just this.endstage.

It’s not a great strategy though as it assumes that all names will have their own computed properties.

If endstage is the only name you care about then you could do something like this:

<td v-for="steps in item.steps" :style="steps.name === 'endstage' ? endstage : null">

If there are others then it’d be better to use a method:

<td v-for="steps in item.steps" :style="getStyle(steps.name)">

with:

methods: {
  getStyle (name) {
    switch (name) {
      case 'endstage':
        return {'background-color': '#f9f9f9'}
      // Other cases here
    }
  }
}
👤skirtle

1👍

It must be v-bind not v:bind.

👤Orkhan Alikhanov

Leave a comment