vuetify.js - Vuetify 阻塞 UI 几秒钟

Question

在以下代码上加载 v-for：

  <v-flex class="v-card-cards" xs6 sm4 md4 lg2>
<v-card>
  <v-card-title>
    <span class="headline black--text">
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn icon color="warning" flat small v-on="on">
            <v-icon>edit</v-icon>
          </v-btn>
        </template>
        <span>{{ $t('messages.app.edit') }}</span>
      </v-tooltip>
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-btn icon color="error" flat small v-on="on">
            <v-icon>delete</v-icon>
          </v-btn>
        </template>
        <span>{{ $t('messages.app.delete') }}</span>
      </v-tooltip>
    </span>
    <v-spacer></v-spacer>
    <v-icon class="profile_icon elevation-5 success--text" x-large>account_circle</v-icon>
  </v-card-title>
  <v-divider class="ml-0"></v-divider>
  <v-list>
    <v-list-tile>
      <v-list-tile-action>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-icon color="info" small v-on="on">info</v-icon>
          </template>
          <span>{{ $t('messages.forms.newCard.fields.firstname.label') }}</span>
        </v-tooltip>
      </v-list-tile-action>
      <div>
        <span class="caption truncate">{{ item.firstname }}</span>
      </div>
    </v-list-tile>
    <v-divider inset></v-divider>
    <v-list-tile>
      <v-list-tile-action>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-icon color="info" small v-on="on">info</v-icon>
          </template>
          <span>{{ $t('messages.forms.newCard.fields.lastname.label') }}</span>
        </v-tooltip>
      </v-list-tile-action>
      <div>
        <span class="caption truncate">{{ item.lastname }}</span>
      </div>
    </v-list-tile>
    <v-divider inset></v-divider>
    <v-list-tile>
      <v-list-tile-action>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-icon color="info" small v-on="on">people</v-icon>
          </template>
          <span>{{ $t('messages.forms.newCard.fields.groups.label') }}</span>
        </v-tooltip>
      </v-list-tile-action>
      <div>
        <span
          v-for="group in item.groups"
          :key="item.groups._id"
          class="caption truncate"
        >{{ group.description }}</span>
      </div>
    </v-list-tile>
    <v-divider inset></v-divider>
    <v-list-tile>
      <v-list-tile-action>
        <v-tooltip top>
          <template v-slot:activator="{ on }">
            <v-icon color="info" small v-on="on">note</v-icon>
          </template>
          <span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
        </v-tooltip>
      </v-list-tile-action>
      <div>
        <span class="caption truncate">{{ item.notes }}</span>
      </div>
    </v-list-tile>
    <v-divider inset></v-divider>
  </v-list>
  <v-card-actions class="mx-3">
    <v-spacer></v-spacer>
    <v-tooltip top>
      <template v-slot:activator="{ on }">
        <v-badge overlap color="info">
          <template v-slot:badge>12</template>
          <v-icon
            large
            v-on="on"
            color="grey darken-1"
            @click="$router.push({ name: 'dashboard' })"
          >description</v-icon>
        </v-badge>
      </template>
      <span>{{ $t('messages.forms.newCard.fields.notes.label') }}</span>
    </v-tooltip>
  </v-card-actions>
</v-card>

在加载此内容期间，页面被阻止了几秒钟。为什么？能解决吗？我已经尝试避免 vuetify 的“v-”指令，只使用 html，所以没有得到任何阻塞。但我想使用 vuetify 风格。

试图在网上找到其他类似的问题，但我对这个论点一无所知

标签： vuetify.js