如何在 Vuetify 组件的内联 CSS 中使用来自 Vue 组件的数据答案

【问题标题】：How to use data from a Vue component inside inline CSS in a Vuetify component如何在 Vuetify 组件的内联 CSS 中使用来自 Vue 组件的数据
【发布时间】：2019-01-03 14:32:10
【问题描述】：

我有一个从数据生成的列表组件，我希望为每个组件填充数据中设置的颜色。

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>

我想使用来自 subItem 的数据作为列表元素的背景颜色。

有什么想法吗？

代码笔：https://codepen.io/anon/pen/XBaOjP?editors=1010

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

改用这个：

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

【讨论】：

这个。这就是我想知道的。如何插入值 ${subItem.colour} 是我需要的。非常感谢:)
@thatOneGuy 很高兴我能帮上忙。