Pourquoi ma propriété calculée Vue ne se met-elle pas à jour lors de l'utilisation des fonctions fléchées ?

Utilisation des fonctions fléchées dans les propriétés calculées de Vue

Dans Vue, les fonctions fléchées peuvent être utilisées pour définir des propriétés calculées. Cependant, les utilisateurs peuvent rencontrer un problème où la couleur de leur élément calculé ne change pas lors de l'utilisation des fonctions fléchées.

Comparaison du code original et modifié

Le code original utilise la syntaxe de fonction traditionnelle pour définir les propriétés calculées :

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  switchGreen: function() {
    return { green: this.turnGreen };
  },
  switchBlue: function() {
    return { blue: this.turnBlue };
  }
}

Après avoir modifié le code pour utiliser les fonctions fléchées, le problème se pose :

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

Cause profonde

Le problème réside dans l'utilisation des fonctions fléchées. Les fonctions fléchées héritent de leur contexte this du parent, alors que la syntaxe de fonction traditionnelle le lie à l'instance Vue. Lors de l'utilisation de fonctions fléchées dans les propriétés calculées, cela n'est pas lié à l'instance Vue, ce qui entraîne l'échec de la mise à jour de la couleur de l'élément calculé.

Solution

À Pour résoudre le problème, il est recommandé d'utiliser la syntaxe de fonction traditionnelle pour les propriétés calculées. Alternativement, on peut utiliser des fonctions fléchées pour les méthodes, mais il est important de les lier explicitement à l'instance Vue à l'aide des méthodes bind ou apply.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!