Comment résoudre l'erreur « Mutating Props vue-warn » dans la leçon « Vue, Laravel et AJAX » de Vue 2 ?

Vue 2 : Résolution de l'erreur « Mutation des accessoires vue-warn » dans la leçon « Vue, Laravel et AJAX »

Le défi

En suivant la série « Apprentissage de Vue étape par étape », les développeurs rencontrent l'erreur « Éviter de muter un accessoire directement... Prop en cours de mutation : '"liste".'" en atteignant le fichier "Vue, Laravel, et AJAX".

Comprendre le problème

L'erreur provient de la mutation de l'accessoire list directement dans le hook créé(). Les accessoires sont immuables dans Vue et ne doivent pas être modifiés directement. Leur modification amène Vue à écraser la valeur de la prop chaque fois que le composant parent est restitué.

Solution

Pour remédier à ce problème, suivez ces étapes :

1. Créer un champ de données local : Créez un nouveau champ dans le hook data() pour stocker une version mutable de l'accessoire de liste.

<code class="javascript">data: function () {
    return {
        mutableList: JSON.parse(this.list);
    }
}</code>

2. Utilisez le champ local : Manipulez le champ mutableList au lieu de la prop list. Cela garantit que Vue reste réactif aux modifications apportées au champ local et met à jour l'interface utilisateur en conséquence.

Considérations supplémentaires

• Évitez d'utiliser le même nom pour le domaine des accessoires et des données.
• Familiarisez-vous avec l'immuabilité des accessoires et ses implications pour la réactivité dans Vue.

Référence

• [Guide officiel Vue.js - Accessoires](https://vuejs.org/v2/guide/components.html#Props)

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!