Question

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

BaseAuthController.ts

[void] [System.Reflection.Assembly]::LoadWithPartialName("System.Drawing") 
[void] [System.Reflection.Assembly]::LoadWithPartialName("System.Windows.Forms")
[void] [System.Reflection.Assembly]::LoadWithPartialName("System.Data")

# Main Form
$Form = New-Object System.Windows.Forms.Form    
$Form.Size = New-Object System.Drawing.Size(510,450)
$Form.Text = "Test"
$Form.TopMost = $false
$Form.MinimizeBox = $false
$Form.MaximizeBox = $false
$Form.StartPosition = "CenterScreen"
$Form.FormBorderStyle = "FixedToolWindow"

# Datasource
$dt = New-Object System.Data.DataTable
[void]$dt.Columns.Add("Name")
[void]$dt.Columns.Add("Step")
[void]$dt.Rows.Add("Jack","1")
[void]$dt.Rows.Add("Jayden","2")
[void]$dt.Rows.Add("Dylan","3")
[void]$dt.Rows.Add("Ben","4")

# Datagridview
$DataGrid = New-Object System.Windows.Forms.DataGridView
$DataGrid.Location = New-Object System.Drawing.Size(10,10)
$DataGrid.Size = New-Object System.Drawing.Size(300,200)
$DataGrid.AllowUserToAddRows = $false
$DataGrid.DataSource = $dt
$DataGrid.DataBindings.DefaultDataSourceUpdateMode = 'OnPropertyChanged'
$DataGrid.AutoResizeColumns()
$Form.Controls.Add($DataGrid)

# Up Button
$upButton = New-Object System.Windows.Forms.Button
$upButton.Location = New-Object System.Drawing.Size(320,20)
$upButton.Size = New-Object System.Drawing.Size(90,40)
$upButton.Text = “Up”
$upButton.Add_Click({
    moveRow -1
})
$Form.Controls.Add($upButton)

# Down Button
$downButton = New-Object System.Windows.Forms.Button
$downButton.Location = New-Object System.Drawing.Size(320,70)
$downButton.Size = New-Object System.Drawing.Size(90,40)
$downButton.Text = “Down”
$downButton.Add_Click({
    moveRow 1
})
$Form.Controls.Add($downButton)

# Function to move record in DataGridView
function moveRow ($direction){

    if ($DataGrid.SelectedRows[0] -ne $null){

        $currentRow = $DataGrid.SelectedRows[0].Index

        # Don't move up if you are at the top
        if (($currentRow -eq 0) -and ($direction -eq -1)){
            return
        }
        # Don't move down if you are at the bottom
        elseif (($currentRow -eq ($DataGrid.Rows.Count - 1)) -and ($direction -eq 1)){
            return
        }
        else {

            # Get Current and New Values
            $currentValue = $DataGrid.Rows[$currentRow].Cells["Step"].Value
            $newRow = $currentRow + $direction
            $newValue = $DataGrid.Rows[$newRow].Cells["Step"].Value

            # Swap Values
            $DataGrid.Rows[$currentRow].Cells["Step"].Value = $newValue
            $DataGrid.Rows[$newRow].Cells["Step"].Value = $currentValue

            # Sort and refresh DataGridView        
            $DataGrid.ClearSelection()
            $DataGrid.Rows[$newRow].Selected = $true;
            $DataGrid.Sort($DataGrid.Columns["Step"], "Ascending")
        }
    }   
}

# Show Form
$Form.Add_Shown({$Form.Activate()})
[void] $Form.ShowDialog()

SignupController.vue

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.ts

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

Answer 1

您只需要为Vue实例设置data，该实例最初绑定到DOM，但不会更新，也不会跟踪更改到此data变量。您需要通过TypeScript类上的设置器来创建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。

VueJS Typescript-DOM不使用超级类中的变量更新

1 个答案: