CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Devon Bessemer
Devon Bessemer

Reputation: 35337

v-if not updating on child component when object is updated

I have a Form class that contains an errors object and a clearError method for when an input is updated so the error message goes away once they keydown. What isn't working is the help text doesn't go away on the keydown if I just delete one property.

Stripped down:

class Form {

    clearError(field = null) {
        if (!field) {
            this.formErrors = {};
            return;
        }

        delete this.formErrors[field];
    }

    hasError(field) {
        return this.formErrors[field] !== undefined;
    }
}

In my input help component I have:

<span v-if="form.hasError(field)" v-text="form.getError(field)"></span>

In my main form I have:

<form @keydown="form.clearError($event.target.name)">
...
<input-help :form="form" field="email"></input-help>

The v-if works fine if I clear out formErrors in all (form.clearError()) but not if I just clear out one property on formErrors (form.clearError('email')). I'm assuming there is some sort of cache I am running into.

I've logged the $event.target.name, it works fine, and I can see in the Vue dev tools that the formErrors.email property is removed, but the help text still remains as the v-if (in input-help) is not correctly computing the change in value.

Any idea how I can make this v-if update properly? I'd rather not clear all errors, I want to only clear the error relating to the input that is modified.

Upvotes: 0

Views: 113

Answers (1)

dfsq
dfsq

Reputation: 193261

You need to tell Vue that your are trying to delete property that Vue doesn't know about. So instead of 

delete this.formErrors[field];

use

Vue.delete(this.formErrors, field);

Upvotes: 1

Related Questions