时间戳

首页 > 解决方案 > Vuetify 渲染标签而不是类名

vue.js - Vuetify 渲染标签而不是类名

问题描述

我正在使用 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

在此处输入图像描述

标签： vue.jsvuetify.js

解决方案

尝试将列表项包装在父 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>

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

请更新您的笔。它是空的。

推荐阅读