How to use data from a Vue component inside inline CSS in a Vuetify component

1
votes

I have a list component generated from data and I wish to fill each one the colour that is set inside the data.

The vue component 

new Vue({
  el: '#app',
  data () {
    return {
      items: [
        {
          action: 'local_activity',
          title: 'Attractions',
          items: [
            { title: 'List Item',
            colour: "red"}
          ]
        }
      ]
    }
  }
})

The list component 

<v-list>
  <v-list-group v-for="item in items" v-model="item.active" :key="item.title" :prepend-icon="item.action" no-action>
    <v-list-tile slot="activator">
      <v-list-tile-content>
        <v-list-tile-title>{{ item.title }}</v-list-tile-title>
      </v-list-tile-content>
    </v-list-tile>

    <v-list-tile v-for="subItem in item.items" :key="subItem.title" @click="">
      <v-list-tile-content background="subItem.colour">
        <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
      </v-list-tile-content>

      <v-list-tile-action>
        <v-icon>{{ subItem.action }}</v-icon>
      </v-list-tile-action>
    </v-list-tile>
  </v-list-group>
</v-list>

Specifically this part : 

<v-list-tile-content background="subItem.colour">
  <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>

I want to use data from subItem to use as the background colour of the list element.

Any idea ?

CodePen : https://codepen.io/anon/pen/XBaOjP?editors=1010

1
javascriptvue.jsvuetify.js

1 Answers

1
votes

Use this instead: 

<v-list-tile-content :style="`background: ${subItem.colour}`">
    <v-list-tile-title >{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>