Vue.js met toujours à jour les accessoires même si i est une variable de méthode

Question

J'ai la méthode suivante pour comparer deux tableaux, un à partir d'accessoires et un autre à partir de mon composant. J'insère chaque élément qui existe dans le tableau d'accessoires mais pas dans mon tableau de composants dans un troisième tableau et j'ajoute une propriété appelée "destroy: true" afin que je puisse l'envoyer au backend Supprimer de la base de données.

Cependant, pour une raison quelconque, mes accessoires sont mis à jour au lieu des variables que j'utilise dans la méthode. Je ne sais pas vraiment pourquoi cela se produit puisque je ne fais pas référence directement à l'accessoire, mais je copie son contenu dans une variable de la méthode.

updateArray(){
        let updatedArray = []
        let oldArray = [...this.props.array]
        oldArray.forEach(element => {
          if(this.componentArray.indexOf(element) > -1){
            updatedArray.push(element)
          }else{
            let newElement = element
            newElement.destroy = true
            updatedArray.push(newElement)
          }
        })
       return updatedArray 
},

Pourquoi cela arrive-t-il ? Les autres éléments de mon composant fonctionnent correctement, seul celui-ci présente des problèmes.

Answer 1

Oui, vous copiez les this.props.array éléments du tableau dans un nouveau tableau local de méthode, mais comme les éléments du tableau sont des objets, les deux tableaux finissent par contenir le même objet (une référence à l' objet )

Vous pouvez créer une let newElement = { ...element }copie superficielle de l'élément d'origine à l'aide de l'opérateur de propagation - cela créera un objet complètement nouvel, copiant toutes les propriétés de l'objet d'origine. Mais sachez que si des propriétés de l'objet d'origine contiennent des tableaux/objets, vous serez confronté au même problème... juste un peu plus profond