F7-list and vue array sync issue

Questions
1

Hello. I’m using the f7-list with the v-for vue directive to create a list from an array of objects. The list is sortable and uses swipeout for deletions. Everything updates beautifully on the UI, but when I delete or reorder list items on the UI it’s out of sync with the underlying array of objects in the data section of vue. Additionally, if I add an element to the start of the array it does not get the ordering right on the UI, indicating that the f7 representation of the list is out of sync with the vue data. How do I solve this issue? Example below:

<f7-list sortable id="notes">
  <f7-list-item v-for="item in items" 
    swipeout  
    :title="item.title"
    :key="item.id">
    <f7-swipeout-actions right>
      <f7-swipeout-button delete>Delete</f7-swipeout-button>
    </f7-swipeout-actions>
  </f7-list-item>
</f7-list>

...
  data() {
    var items = [
      { id: 1, title: "my item 1" },
      { id: 2, title: "my item 2" },
      { id: 3, title: "my item 3" },
      { id: 4, title: "my item 4" }
    ];
    return {
      items: items // How do I make this array sync with what's on the UI? e.g. when order is changed or item is deleted.
    }
  },
  method: {
	addItem: function() {
		this.items.unshift({ id: 5, title: "add this item to top" }); // if order has already been changed in UI, it may not add to the top
	}
 ...
2

You should use these methods:

…
onDelete($Index) {
this.items.splice($Index, 1);
},
onSort($event, $Indexes) {
const {from, to} = $Indexes;
this.items.splice(to, 0, this.items.splice(from, 1)[0]);
}

And for reactivity at arrays of Vue look at this article https://vuejs.org/2016/02/06/common-gotchas/

1 Like
3

Thank you Almazk. I think I’m almost there. I’ve used v-on:swipeout:delete=“onDelete” but it’s not giving me $Index (just gives the DOM event). I’m sure this is something simple, please advise.

4

Pass whatever you need in your template v-on:swipeout:delete=onDelete(item)

1 Like
5

Thanks Vladimir. It’s all working perfectly now!