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

Posted 2023-02-22

【中文标题】VueJS Typescript - DOM 未使用超类中的变量进行更新

【英文标题】：VueJS Typescript - DOM not updating with variable in Super Class

【发布时间】：2019-01-11 21:41:49

【问题描述】：

基本上我有一个带有通用登录函数和变量的 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);
    

【参考方案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。

【讨论】：

只是为了确认，我添加了 get computedErrorMessage() return this.errorMessage; 在我的 SignupController.ts 文件中并使用 computedErrorMessage 更新了我的 SignupController.vue 文件但是，它仍然无法正常工作吗？您是正确的，因为它获取了初始值，但从那时起它不会随 getter 更新？我只有调用 this.$forceupdate() 才能让它工作，我知道这太恶心了。

你能重现这个在 jsFiddle 之类的东西中不起作用吗？拥有完整的代码可以工作和调整将帮助您更快地找到解决方案。