I am currently working on a list component that is dynamically generated from data and I have a specific requirement to style each item based on the color provided in the data.
Here is an example of the Vue component:
new Vue({
el: '#app',
data () {
return {
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item',
colour: "red"}
]
}
]
}
}
})
The list component structure looks like this:
<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, the code snippet below determines the background color of the list element using data from the subItem:
<v-list-tile-content background="subItem.colour">
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>My goal is to use the color provided in the subItem data as the background color for each list element. Any suggestions on how to achieve this?
You can view the CodePen with the complete example here: https://codepen.io/anon/pen/XBaOjP?editors=1010