Vuetify 呈现标签而不是类名答案

【问题标题】：Vuetify renders tags instead of class nameVuetify 呈现标签而不是类名
【发布时间】：2019-12-09 14:13:13
【问题描述】：

我正在使用 vuetify 的 v 卡，但我意识到，当我使用相同的标记进行操作时，与代码笔中的示例相比，我的“v-list-item”呈现不同。一些 CSS 样式也没有遵循。有人经历过吗？

<v-card
  class="mx-auto"
  max-width="344"
  outlined
>
  <v-list-item three-line>
    <v-list-item-content>
      <div class="overline mb-4">OVERLINE</div>
      <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
      <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
    </v-list-item-content>

    <v-list-item-avatar
      tile
      size="80"
      color="grey"
    ></v-list-item-avatar>
  </v-list-item>

  <v-card-actions>
    <v-btn text>Button</v-btn>
    <v-btn text>Button</v-btn>
  </v-card-actions>
</v-card>

https://codepen.io/pen/?&editable=true&editors=101

【问题讨论】：

你的代码笔路径错误。
您使用的 Vuetify 版本是否与示例相同？您没有看到关于未知自定义元素的控制台警告吗？

标签： vue.js vuetify.js

【解决方案1】：

尝试将列表项包装在父 v-list 组件中。

<v-card
      class="mx-auto"
      max-width="344"

    >
      <v-list> <!-- NOTE THE PARENT COMPONENT!!! -->
        <v-list-item three-line>
          <v-list-item-content>
            <div class="overline mb-4">OVERLINE</div>
            <v-list-item-title class="headline mb-1">Headline 5</v-list-item-title>
            <v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
          </v-list-item-content>

          <v-list-item-avatar
            tile
            size="80"
            color="grey"
          ></v-list-item-avatar>
        </v-list-item>
      </v-list>

      <v-card-actions>
        <v-btn text>Button</v-btn>
        <v-btn text>Button</v-btn>
      </v-card-actions>
    </v-card>

但它所做的只是为块添加边距。

请更新您的笔。是空的。

【讨论】：