Привязать цвет с Vuejs

Question

Я хочу задать цвет значка с циклом for. Я пытался таким образом. Но не получая результата. Я знаю, что можно связать стиль.

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

Свойство данных:

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

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

Как я могу это сделать?

Answer 1

Вы не должны использовать:

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

Вместо bind переменный цвет:

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