[Vuejs]-VueJS Typescript – DOM not updating with variable in Super Class

0👍

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.

Leave a comment