VueJS Typescript - DOM not updating with variable in Super Class

问题

Essentially I have a BaseAuthController with on common login functions and variables, I then have a SignupController and a LoginController that inherit from the BaseAuthController. I have looked at the variable through breakpoints and the variables are all being set correctly and they exist. The issue is changing the variable in the super class is not then updating the 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);
    }
}
}

回答1:

You are only setting the data for the Vue instance, which is bound to the DOM initially but does not get updated nor are changes tracked to this data variable. You need to create a computed data property via a setter on your TypeScript class, like this:

get computedErrorMessage() {
    return this.errorMessage;
}

Now in your SignupController.vue file, reference the computedErrorMessage property instead of the errorMessage variable, like this:

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

The computed property monitors any data variables that are part of its logic, in your case just this.errorMessage; so whenever this.errorMessage changes then the computedErrorMessage is updated and Vue is notified and that value is pushed down to the DOM.

来源：https://stackoverflow.com/questions/51682059/vuejs-typescript-dom-not-updating-with-variable-in-super-class