Bind color with Vuejs

Question

I want to give icon color with for loop. I have tried in this way. But getting no result. I know it's possible to bind style.

<v-tab v-for="navtab in navtabs" :key="navtab">
    <v-icon color="{{ navtab.color }}">{{ navtab.icon }}</v-icon>
</v-tab>

Data property:

<script>
export default {
    data () {
      return {
      navtabs: [
        {
          icon: 'info',
          name: 'About Book',
          color: 'teal darken-2'
        },

        {
          icon: 'favorite',
          name: 'Specification',
          color: 'orange darken-2'
        }
      ]
   }
}

How can I do this?

Is darken-2 a color or css class?

dziraf
– dziraf

2019-03-27 18:10:59 +00:00
Commented Mar 27, 2019 at 18:10 — dziraf
– dziraf, Commented Mar 27, 2019 at 18:10
color name. You can see any example in vuetify.

Info Kamiabi
– Info Kamiabi

2019-03-27 18:15:20 +00:00
Commented Mar 27, 2019 at 18:15 — Info Kamiabi
– Info Kamiabi, Commented Mar 27, 2019 at 18:15

Matheus Valenza · Accepted Answer · 2019-03-27 18:46:03Z

4

You should not use:

<v-icon color="{{ navtab.color }}">{{ navtab.icon }}</v-icon>

Instead, bind the variable color:

<v-icon :color="navtab.color">{{ navtab.icon }}</v-icon>

answered Mar 27, 2019 at 18:46

Matheus Valenza

9191 gold badge5 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

Bind color with Vuejs

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