Framework7-Vue Sortable List Acting Weird

Questions
1

I wrote the following code:

<template>
  <f7-page>
    <f7-list sortable :sortable-enabled="true" @sortable:sort="updateList">
      <f7-list-item v-for="(item, index) in list" :key="index" :title="item" />
    </f7-list>
  </f7-page>
</template>

<script>
export default {
  data: () => ({ list: ['a', 'b', 'c', 'd', 'e', 'f', 'g'] }),
  methods: {
    updateList (event, { from, to }) {
      this.list.splice(to, 0, this.list.splice(from, 1)[0])
    }
  }
}
</script>

Each time I move an item, the item will move to another position immediately.
If I don’t update the list in updateList(), then there’s no problem.
Is there any way that I can not only fix this but also maintain the list?

2

I see this issue because F7 core moves DOM elements as well, pushed fix for this so will be in next release. For Vue workaround you can use something like this at the moment:

data() {
  const list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
  return {
    list,
    sortedList: [...list],
  };
},
methods: {
  updateList(event, { from, to }) {
    this.sortedList.splice(to, 0, this.sortedList.splice(from, 1)[0])
  }
}
1 Like
3

Recently, I migrated my project to V3.
I found that V3 has the same issue.

4

Hi @nolimits4web,

I need the list to be reactive since I update the list dynamically.
Is there any way that I can maintain the list?

Thanks

5

It was fixed. You can now set sortable.moveItems app parameter to false and move items in Vue/React based on sort event

6

If I set sortable.moveElements to “false”, then the event handler function @sortable:sort will always receive the same value from and to (ex. {from: 4, to: 4})

But I need “from” and “to” to update my list.
Is there any other ways that I can get “from” and “to”?

7

Found a bug with it, pushed fix

1 Like