Sortable:sort event issue

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

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


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?


here => nice-moser-igru13 - CodeSandbox

1 Like

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

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.

	<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 class="list sortable">
					v-for="(item, i) in items"
					@sortable:sort="(e) => order(e.detail)"
					<div class="item-content">
						<div class="item-inner">
							<div class="item-title">{{ item }}</div>
					<div class="sortable-handler"></div>
		<div class="block text-align-center">
			<pre>{{ JSON.stringify(items, null, 2) }}}</pre>
<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(, x, ...i.splice(o.from, ++x))


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

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


1 Like

Thank you. All is working well. Appreciate it.