为什么每次其他卡片属性更改时 Vuetify 都会重新加载图像？

Question

我正在使用 Vuetify 为应用程序创建登录表单。

此表单类似于 Google 的登录表单，它首先要求输入电子邮件地址，然后在下一个屏幕上输入密码。这样做的目的是查找用户的电子邮件地址，以查看是执行本地身份验证还是将用户重定向到单点登录提供商。

这里是登录组件的相关部分代码：

<template>
    <v-app id="sm-login">
        <v-content>
            <v-container class="fill-height" fluid>
                <v-card class="mx-auto px-10 pb-9" width="450px" :loading="loading">
                    <v-card-title class="justify-center pt-12"><img src="../../images/logo.png"></v-card-title>
                    <v-card-subtitle class="text-center py-6 headline">Sign In</v-card-subtitle>
                    <v-card-text>
                        <v-form v-if="!showPassword" v-on:submit.prevent="lookupEmail">
                            <v-text-field v-model.trim="email" label="Email" name="email" type="email" outlined />
                        </v-form>
                        <v-form v-if="showPassword" v-on:submit.prevent="login">
                            <v-chip outlined class="mb-6" close @click:close="showPassword = false"><v-avatar left><v-icon>mdi-account-circle</v-icon></v-avatar> {{email}}</v-chip>
                            <v-text-field v-model="password" label="Password" name="password" type="password" outlined />
                        </v-form>
                    </v-card-text>
                    <v-card-actions>
                        <v-btn text>Forgot Password?</v-btn>
                        <v-spacer />
                        <v-btn color="primary" v-on:click="clickButton">Log In</v-btn>
                    </v-card-actions>
                </v-card>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            email: '',
            password: '',
            showPassword: false,
        };
    },
    methods: {
        lookupEmail() {
            this.loading = true;
            // Replaced an API call with a timeout for demonstration purposes
            setTimeout(() => {
                this.loading = false;
                this.showPassword = true;
            }, 2000);
        },
        login() {
            // DO LOGIN HERE ...
        },
        clickButton() {
            if (this.showPassword) {
                this.login();
            } else {
                this.lookupEmail();
            }
        }
    }
};
</script>

这里的问题是v-card-title 部分中的徽标。每次打开或关闭loading 属性时，整个卡片都会稍微向上跳跃，然后再次向下跳跃。我发现添加徽标的显式高度和宽度可以修复跳跃，确实如此，但图像仍然每次闪烁。

使用 DevTools 的网络选项卡，我发现每次加载栏出现或消失时都会从服务器重新加载徽标。不用说，这不是期望或预期的行为。

为什么每次都会重新加载徽标，我该怎么办？

Answer 1

这是<v-card> 元素呈现方式中的一个错误。

渲染初始 <v-card> 会创建具有以下类的 div 元素：v-card__title、v-card__subtitle、v-card__text 和 v-card__actions。

当loading 设置为true 时，会在v-card__title 元素上方创建一个新的div 类v-card__progress。

相反，正在修改标题元素以将其转换为v-card__progress，并且为v-card__title 创建了一个新的div。这个新的div 中的新img 标签是导致重新加载的原因。

同样，当关闭loading 时，您会认为这应该只是删除v-card__progress 元素，但事实并非如此。相反，它会删除 v-card__title 元素并修改 v-card_progress 以将其变成标题。同样，这里的新 img 标记会导致重新加载。

我提交了bug report，其中was fixed in v2.2.16。

---

注意：在一般使用中，这在浏览器中通常不明显。我看到它的唯一原因是因为我打开了 DevTools 并选中了“禁用缓存”。

Answer 2

很奇怪，能不能把<v-content>删掉再试试？就像：

<template>
  <v-app id="sm-login">
    <v-container class="fill-height" fluid>
      ...