Vuejs computed properties and jquery ui sort
In my project I have a component with three lists ul
. Also I have some kind of data array with elements, each element has some properties. My goal:
- Distribute the elements in the underlying array into three lists
- Lets you drag and drop items between lists and update item data accordingly, since each item has a property that tells us which list the item belongs to.
Instead of copying a lot of code, I tried to reproduce the wrong behavior in the jsfiddle using a simple example:
https://jsfiddle.net/89pL26d2/4/
The thing is, when you drag & drop, you get exactly 2 items being dragged instead of one.
However, when I switched from computed properties to watch
, I got the desired behavior and everything worked fine.
I'll figure out which line is causing the error: line when I update an element property telling me which list the element should belong to after the drag is complete. But I can't figure out why this is causing this
I know this isn't the best way to work with HTML directly, but I'm fine now.
source to share
Typically, whenever I see a problem in Vue, especially with lists, where the wrong element is updated or something, it comes to Vue trying to be smart, but it fails because it doesn't have better Information. This is almost always resolved with key
.
It is recommended that you specify the v-for key whenever possible if the repetitive DOM content is simple, or if you are deliberately relying on the default behavior to improve performance.
Key .
<div id="app">
<div>
<ul id="listA" data-list="A" class="connectedSortable">
<li v-for="item in listAFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
</ul>
<ul id="listB" data-list="B" class="connectedSortable">
<li v-for="item in listBFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
</ul>
</div>
</div>
Adding the key fixes your problem .
source to share