The list reverts back when sort is complete

[rickmero]

When I drop my list item it reverts back. Is there anything I've forgot?

When I look at the list in my model/inspector everything looks correct. The actual model has been sorted, it is just a visual issue.

If I wrap the sortable list in a v-if and toggles the condition to force Vue to remove and add it back to the DOM the list renders correct.

[ghost]

How do you insert keys? It should not be index of loop.

[ghost]

@rickmero

• are u binding key for the v-for? (do)
• are you using an actual array? (use a proper array, not an object/map or similar)
• are you using filter anywhere? (dont if the array consists of objects)

[titusdecali]

Did you find a solution to this outside of an array? I am also getting the same issue as above, but my use case requires an object.

[ghost]

YOu should generate static keys.

[titusdecali]

YOu should generate static keys.

Can you give me a code example of how that might look? Thanks

[ghost]

@synapse709 see my post above as the vue docs state, list items (v-for) always need to have a key bound for them to render properly

so essentially :key="record.key" where the key must be unique

[titusdecali]

I've actually already tried that exactly, by adding a unique ID within each object and then setting :key="item.id", however this doesn't seem to change anything.

[ghost]

are you handling the event properly? sorting doesnt mutate your array directly, the event returns a newly sorted array, which you then have to apply to your array

[ghost]

Be sure the key doesn't update on sort. If you share code example i can edit on them.

[ghost]

@synapse709 Close the issue if you solved. Or share your code.

[titusdecali]

@synapse709 Close the issue if you solved. Or share your code. @rickmero opened this issue, not me.

[Heziode]

I have also this problem. Here is a reproductible: https://jsfiddle.net/x9fwdr8v/

@Jexordexan, the problem seems appears when the model refers to an array inside an object and when this array is dynamically added to the object.

[ventralnet]

I had this same issue and it ended up being that my :key on my v-for loop was wrong (it was null/wrong property name)

[vjik]

Seems, @Heziode is right.

My code:

<sortable-list
	axis="y"
	v-model:list="entity.channels"
	:use-drag-handle="true"
	v-show="hasChannels"
	@input="updateChannelsOrder"
>
	<EntityChannel
		v-for="(entityChannel, i) in entity.channels"
		:key="entityChannel.id"
		:index="i"
		:entity="entity"
		:entity-channel="entityChannel"
		@startLoading="loading=true"
		@stopLoading="loading=false"
		@updated="updated()"
	/>
</sortable-list>

After add or remote item to array entity.channels sorting is work internal (method updateChannelsOrder is run), but don't work visual (order of items reset to initial).