VueJS prevent reactive behaviour

Question

How can I use VueDraggable to clone an item that once cloned has no link to the original item.

Please take this fiddle as an example: https://jsfiddle.net/32f7yu7c/69/

When you drag an item from list 1 to list 2, please hit the 'update' text and you'll see both names in both lists are updated. How can i prevent this behaviour?

What I would like is this click handler <span @click="update(index)">Update</span> is triggered you update only the item in the relative list.

Jim B. · Accepted Answer · 2018-11-16 17:35:08Z

1

By default, VueDraggable doesn't actually make a deep clone. You need to add a 'clone' property to your draggable component, with the name of your clone method:

<draggable :list="list" class="dragArea" :clone="clone" :options="{group:{ name:'people',  pull:'clone', put:false }}">

and add the clone method to your component:

clone: function(me) {
   return JSON.parse(JSON.stringify(me));
}

Here's a working fiddle:

https://jsfiddle.net/jmbldwn/3gcyemft/1/

answered Nov 16, 2018 at 17:35

Jim B.

4,7944 gold badges32 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

seb14717 Over a year ago

I literally love you. Thanks!

Jim B. Over a year ago

Best reaction I've ever gotten :-). You're welcome.

seb14717 Over a year ago

Out of curiosity why do we have to do this?

Jim B. Over a year ago

It's the safe choice. Some use cases may not want to make copies automatically.

Collectives™ on Stack Overflow

VueJS prevent reactive behaviour

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related