我有一个由数据生成的列表组件,我希望将数据中设置的颜色填充到每个组件中。
vue组件
new Vue({
el: '#app',
data () {
return {
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item',
colour: "red"}
]
}
]
}
}
})
列表组件
<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>
具体来说,这一部分:
<v-list-tile-content background="subItem.colour">
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
我想使用子项中的数据作为列表元素的背景色。
知道吗?
密码笔:
https://codepen.io/anon/pen/XBaOjP?editors=1010
