CODEWITHSUNDEEP
reactjsmobx
dagda1
dagda1

Reputation: 28760

mobx computed property observing computed property does not recalcuoate

I have the following 2 computed properties, the first is based off an observable password:

@observable password = '';

@computed
get passwordRules() {
    return [
        {isValid: !!((this.password.length >= 8) && (this.password.indexOf(' ') < 0 )), label: pageConstants.TIP_1},
        {isValid: !!this.password.match('^(?=.*[A-Z])'), label: pageConstants.TIP_2},
        {isValid: !!this.password.match('^(?=.*[a-z])'), label: pageConstants.TIP_3},
        {isValid: !!this.password.match('^(?=.*[0-9])'), label: pageConstants.TIP_4},
        {isValid: !!this.password.match('^(?=.*[-~!@#€=?_<>£"{}\[\\]\+\(\)\$%\^&\*])'), label: pageConstants.TIP_5}
    ];
}

@computed
get passwordIsValid() {
    return !some(this.passwordRules, rule => !rule.isValid);
}

I would like the passwordIsValid to recalculate whenever any item in the passwordRules array changes but this is not currently happening.

passwordIsValid is only accessed the first time it is called and does not recalculate whenever any of the isValid property changes in the passwordRules array.

Upvotes: 0

Views: 772

Answers (1)

mweststrate
mweststrate

Reputation: 4978

Note that passwordRules does not return something observable, so there is nothing for MobX to track. Probably you need @observable passwordRules = [{ isValid ... }] if you intend to modify them in the future. It seems like you handle passwordRules as state, rather then a derived value (which should not be modified directly as it is derived)

Upvotes: 1

Related Questions