[Vuejs]-I am getting a prop mutation error when passing from child to child

by

0👍

Inside Child two, you can use structuredClone, so that it won’t mutate it’s parent data.

Here’s an example on child two component, you can computed to access the data like this:

<template>
  <div>
    {{ nonMutatedData }}
  </div>
</template>

<script>
  props: { myData: Array }
   data() {
     return {
       showModal: false
       myOtherData: [ some other data... ]
     }
   }
  methods: {
     open() {
       this.showModal = true
      },
   checkIfSimilarIdExists() {
     if (this.myData.some(data => data.id === this.myOtherData.id)) {
       console.log('There is a duplicate ID!')
     }
   },
   }
   computed: {
    nonMutatedData() {
      const clonedData = structuredClone(this.myData)
      return clonedData
    }
   }
 }
</script>

Leave a comment