Javascript I'；I’我试图显示输入错误凭据的警报，但仅在控制台中显示

我一直试图在用户在登录页面中输入错误的crenditials时返回警报

我使用的代码如下：

<template>
    <v-row justify="center">
        <v-col md="4">
            <v-card elevation="2">
                <v-card-title>Login</v-card-title>
                <v-card-text>
                    <v-form
                    ref="form"
                    v-model="valid"
                    lazy-validation
                    >
                        <v-text-field
                            v-model="email"
                            :rules="emailRules"
                            label="Email"
                            outlined
                            required 
                        >
                        </v-text-field>

                        <v-text-field
                            v-model="password"
                            :rules="passwordRules"
                            label="Password"
                            outlined
                            required
                            :type="show ? 'text' : 'password'"
                            @click:append="show = !show"
                            :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
                        >
                        </v-text-field>

                        <v-btn
                            elevation="2"
                            color="primary"
                            @click="login"
                        >
                            Login
                        </v-btn>
                    </v-form>

                    <p class="pt-2">Create an account? <router-link :to="{ name: 'Register' }">Register</router-link></p>
                </v-card-text>
            </v-card>
        </v-col>
    </v-row>               
</template>

<script>
export default {
    data() {
        return {
            show: false,
            valid: false,
            email: '',
            password: '',
            emailRules: [
                v => !!v || 'Email is required',
                v => /.+@.+/.test(v) || 'Email must be valid'
            ],
            passwordRules: [
                v => !!v || 'Password is required',
                v => v.length >= 8 || 'Password must be 8 characters or more'
            ]
        }
    },
    methods: {
        login() {
            const valid = this.$refs.form.validate()
            if(valid){
                this.$store.dispatch('login', {
                    email: this.email,
                    password: this.password
                })
            }
        }
    }
}
</script>

登录
登录
是否创建帐户？登记册
导出默认值{
数据（）{
返回{
秀:假,，
有效：假，
电子邮件：“”，
密码：“”，
电子邮件规则：[
v=>！！v | |“需要电子邮件”，
v=>/.+@.+/.test（v）| |“电子邮件必须有效”
],
密码规则：[
v=>！！v | |“需要密码”，
v=>v.length>=8 | |“密码必须为8个或更多字符”
]
}
},
方法：{
登录（）{
const valid=this.$refs.form.validate（）
如果（有效）{
此.$store.dispatch（'login'{
电子邮件：this.email，
密码：这个是密码
})
}
}
}
}

我一直在使用google firebase和vuetify创建前端，并在后端存储用户信息。当用户输入错误的密码/电子邮件时，控制台会记录一个错误，如下所示：

未捕获（承诺中）t{code:“未找到身份验证/用户”，消息：“没有与此标识符对应的用户记录。用户可能已被删除。”，a:null}

---

我想将此消息显示为警报，但无法确定如何显示。如果有人能提供帮助，我们将不胜感激。

此。$store.dispatch

返回一个承诺，显然向后端服务器发出请求，该请求返回一个错误的响应代码，即非200响应代码。然后，该承诺将被拒绝，并由后端返回错误。通过捕获任何拒绝，您可以更顺利地处理它们，例如

this.$store.dispatch('login', {
  email: this.email,
  password: this.password
})
  .then((res) => { // do things on success })
  .catch((err) => { // do things on error });