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

Question

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

Armin Ayari · Accepted Answer · 2018-07-26 14:45:29Z

1

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>

answered Jul 26, 2018 at 14:45

Armin Ayari

6293 silver badges8 bronze badges

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

2 Comments

thatOneGuy Over a year ago

this. That's what I wanted to know. How to insert the value ${subItem.colour} is what I needed. Thanks alot :)

Armin Ayari Over a year ago

@thatOneGuy Happy i could help.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related