VueJS Typescript-DOM不使用超级类中的变量更新 [英] VueJS Typescript - DOM not updating with variable in Super Class

问题描述

基本上，我有一个具有常用登录功能和变量的BaseAuthController，然后有一个SignupController和一个从BaseAuthController继承的LoginController.我已经通过断点查看了变量，并且所有变量都已正确设置并且存在.问题是更改超类中的变量，然后不更新DOM

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

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

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

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);
    }
}
}

推荐答案

您只为Vue实例设置了 data ，该实例最初绑定到DOM，但未更新也不更改跟踪到此 data 变量.您需要通过TypeScript类上的设置器来创建 computing 数据属性，如下所示:

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;
}

现在在您的 SignupController.vue 文件中，引用 computedErrorMessage 属性而不是 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>

computed 属性监视作为其逻辑一部分的任何 data 变量，在您的情况下，仅监视 this.errorMessage ；因此，只要 this.errorMessage 发生更改，就会更新 computedErrorMessage 并通知Vue，并将该值下推到DOM.

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.

这篇关于VueJS Typescript-DOM不使用超级类中的变量更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！