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中的数据作为列表元素的背景色。

有什么想法吗？

CodePen：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>

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

1 个答案: