Sortable:sort event issue

Questions
1

I want to reindex the array if an item is moved. This is my code.

const onSort = (e) => {
	items.value.splice(e.detail.to, 0, items.value.splice(e.detail.from, 1)[0]);

	console.log(e.detail);
	console.log(items.value);
};

It’s reindexing the array in console.log but visually, the item doesn’t move and goes back to its own position. If I comment out splice() method, then everything works fine and I can move the items on screen without any issue.

Any help, please? What am I doing wrong?

Thanks

2

here => nice-moser-igru13 - CodeSandbox

1 Like
3

@deejay Thank you for the reply and CodeSandbox. Kindly check this short screen record.

https://awesomescreenshot.com/video/9507832?key=3e0db49b3468713777a1d15722636be1

As you can see, I still have this strange behavior in F7 Vue App. While the order works fine in that stringify array but item doesn’t move to the position where I drop it.

Here is my code.

<template>
	<f7-page name="home">
		<f7-navbar no-shadow title="Test" back-link="Back"></f7-navbar>

		<div class="block-title text-align-center">
			<a class="link sortable-toggle" data-sortable=".sortable">Toggle</a>
		</div>

		<div class="list sortable">
			<ul>
				<li
					v-for="(item, i) in items"
					:key="i"
					@sortable:sort="(e) => order(e.detail)"
				>
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title">{{ item }}</div>
						</div>
					</div>
					<div class="sortable-handler"></div>
				</li>
			</ul>
		</div>
		<div class="block text-align-center">
			<pre>{{ JSON.stringify(items, null, 2) }}}</pre>
		</div>
	</f7-page>
</template>
<script setup>
import { f7Page, f7Navbar } from "framework7-vue";
import { ref } from "vue";

const items = ref(["A", "B", "C", "D", "E"]);
const order = (o) =>
	(items.value = [items.value].find((i, x) =>
		i.splice(o.to, x, ...i.splice(o.from, ++x))
	));
</script>

Thanks.

p.s: By the way, everything works in that CodeSandbox. But don’t know why I’m having this issue in Vue App.

4

Again, the issue only happens if sort event reorders the array. It’s working fine without the reordering.

https://awesomescreenshot.com/video/9508119?key=31b569ea8293cc457fb829014d2c9726

5

change:
:key="i"
to:
:key="item"

1 Like
6

Thank you. All is working well. Appreciate it.