VueJS Typescript - DOM 未使用超类中的变量进行更新

Question

基本上我有一个带有通用登录函数和变量的 BaseAuthController，然后我有一个 SignupController 和一个从 BaseAuthController 继承的 LoginController。我已经通过断点查看了变量，并且变量都被正确设置并且它们存在。问题是更改超类中的变量而不是更新 DOM

BaseAuthController.ts

import { RouterStates } from './../../../routing/RouterStates';
import Vue from "vue";

export class BaseAuthController extends Vue
{
// Variables
// ==================================================================

protected errorMessage: string = '';

// Login handling
// ==================================================================

/**
 * Handle loging in
 * @param {firebase.auth.UserCredential} respone 
 */
protected onLoginSuccess(respone: firebase.auth.UserCredential): void
{
    if (respone.user)
    {
        let user: firebase.User = respone.user;
        if (user.emailVerified)
        {
            this.$router.replace(RouterStates.APP);
        }
        else
        {
            user.sendEmailVerification()
                .then(() => 
                {
                    this.$router.replace(RouterStates.VERIFY_EMAIL);
                })
                .catch(err => console.log(err));
        }
    }
}
}

SignupController.vue

<template>
<div class="signup-controller__row">
    <div class="h-group v-align-center">
        <div class="signup-controller__error-image tight"></div>
        <div class="signup-controller__error-message">{{ errorMessage }}</div>
    </div>
</div>
</template>
<script src="./SignupController.ts"></script>

SignupController.ts

export default class SignupController extends BaseAuthController {

// Variables
// ===============================================================

private confirmPassword: string = '';
private creationDetails: AccountCreationDetails = 
{
    email: '',
    password: ''
}

/**
 * Create an account
 * @returns void
 */
private onCreateAccountClick(): void
{

    if (this.creationDetails && this.creationDetails.email != '')
    {
        if (this.creationDetails && this.creationDetails.password != '')
        {
            if (this.confirmPassword != '')
            {
                if (StringUtil.validateEmail(this.creationDetails.email))
                {
                    if (this.creationDetails.password == this.confirmPassword)
                    {
                        firebase.auth().createUserWithEmailAndPassword(this.creationDetails.email, this.creationDetails.password)
                            .then((respone: firebase.auth.UserCredential) => this.onLoginSuccess(respone))
                            .catch(() => 
                            {
                                this.errorMessage = 'There was an issue creating your account';
                            });
                    }
                    else
                    {
                        this.errorMessage = 'Passwords do not match';
                    }
                }
                else
                {
                    this.errorMessage = 'Please enter a valid email address';
                }
            }
            else
            {
                this.errorMessage = 'Please confirm your password';
            }
        }
        else
        {
            this.errorMessage = 'Please enter a password';
        }
    }
    else
    {
        this.errorMessage = 'Please enter your email address';
        console.log(this.errorMessage);
    }
}
}

Answer 1

您仅为 Vue 实例设置 data，该实例最初绑定到 DOM，但不会更新，也不会跟踪此 data 变量的更改。您需要通过 TypeScript 类上的 setter 创建 computed 数据属性，如下所示：

get computedErrorMessage() {
    return this.errorMessage;
}

现在在您的 SignupController.vue 文件中，引用 computedErrorMessage 属性而不是 errorMessage 变量，如下所示：

<div class="signup-controller__error-message">{{ computedErrorMessage }}</div>

computed 属性监视作为其逻辑一部分的任何data 变量，在您的情况下只是this.errorMessage；所以每当this.errorMessage 发生变化时，computedErrorMessage 就会更新，Vue 会收到通知，并将该值推送到 DOM。