Vue draggable change parent data when using KeepAlive

Viewed 46

I have a vue3 app, and one of the child component uses vue-draggable.
In the parent component I have an object (let's call it myJson) which propagates to child component with props. So far it works as expected.
However, when adding 'KeepAlive' to the parent component, every time I drag the items, myJson is set to the drag event instead of the origin data it had. It still occures even if I pass to the child component a copy of myJson (with JSON parse-JSON stringify). See details below

parent component:

<template>
  <KeepAlive>
    <component :is="activeComponent" :my-json="myJson" />
  </KeepAlive >
</template>

data: () => ({
  myJson: { ...someData }
})

mid component:

<template>
  <list-items :items="items" />
</template>

<script>
export default {
  components: { ListItems },
  computed: {
    items() {
      return JSON.parse(JSON.stringify(this.myJson.value.items))
    }
  },
}
</script>

child component (ListItems):

<template>
  <draggable
   v-model="items"
   animation="100"
   handle=".dnd-handle"
   item-key="product"
   class="items-list"
   @start="drag=true"
   @end="drag=false"
  >
   <template #item="{ element, index }">
    {{element}}
   </template>
 </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  props: ['items'],
}
</script>

The items are displayed correctly in the component.
Before dragging, myJson is an object with my data.
After dragging myJson is an event.
Any idea? vuedraggable version is 4.1.0

--UPDATE--
In parent component there is a function "update", which gets value and updates myJson.

methods: { 
  update (value) { 
    myJson = value 
  }
}

I found out that every time I drag, there is a call to this function with the dragging event as value, even when I try to catch the draggable events. Thats why myJson gets wrong value.
My problem was solved when I changed the function's name. But anyone knows why this happens?

0 Answers
Related