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

Question

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

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

Answer 1

改用这个:

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