`Ceci n'est pas défini dans l'observateur vue.js

Question

J'ai un composant avec un observateur

props: {
    propShow: { required: true, type: Boolean }
},

data() {
    return {
        show: this.propShow
    }
},

watch: {
    propShow: {
        handler: (val, oldVal) => {
            this.show = val;
        }
    }
}

Chaque fois que parent le composant change propShow ce composant doit mettre à jour sa propriété show. Le composant This modifie également la propriété show, c'est pourquoi j'ai besoin des deux: show et propShow, car Vue.js ne permet pas de changer directement les propriétés.

Cette ligne

this.show = val;

provoque une erreur

TypeError: Cannot set property 'show' of undefined

car this dans le gestionnaire est undefined.

Pourquoi?

Answer 1

Vous devrez utiliser la syntaxe function ici, comme averti dans la documentation ici :

Notez que vous ne devez pas utiliser de fonction de flèche pour définir un observateur (par exemple searchQuery: newValue => this.updateAutocomplete (newValue)). La raison est que les fonctions fléchées lient le contexte parent, donc ce ne sera pas l'instance Vue comme vous vous y attendez et this.updateAutocomplete ne sera pas défini.

Votre code doit donc être:

watch: {
    propShow: {
        handler: function(val, oldVal) {
            this.show = val;
        }
    }
}