Vuetify阻止用户界面几秒钟

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样式。

曾试图在网络上找到其他类似的问题，但我对此争论一无所获