ReOrder List in NativeScript Vue - nativescript-vue

Question

I'm pretty new to nativescript-vue, but I got an app to display a nice list as fetched from an api.
Now I'd like to be able to have the user reorder it.
The documentation seems aged, so I'll just post this example of a list that at least displays, though cannot be reordered:
<template>
<Page class="page">
<ActionBar title="ListView with Avatars/Thumbnails" class="action-bar" />
<ScrollView>
<ListView for="item in items" class="list-group" #itemTap="onItemTap">
<v-template>
<GridLayout class="list-group-item" rows="*" columns="auto, *">
<Image row="0" col="0" :src="item.src" class="thumb img-circle" />
<Label row="0" col="1" :text="item.text" />
</GridLayout>
</v-template>
</ListView>
</ScrollView>
</Page>
<script>
export default {
data() {
return {
items: [
{ text: "Bulbasaur", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png" },
{ text: "Charmander", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png" },
{ text: "Charizard", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/6.png" },
{ text: "Squirtle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png" },
{ text: "Wartortle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/8.png" },
{ text: "Blastoise", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/9.png" },
{ text: "Caterpie", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/10.png" },
{ text: "Weedle", src: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/13.png" },
]
}
},
methods: {
onItemTap: function(event) {
console.log("You tapped: " + this.$data.items[event.index].text);
}
},
};
</script>
The docs suggest that it should be easy: Item Reorder. But I'm not getting the pieces to fit together. So maybe we can get some concise code here?

Answer 1

Firstly, you need to use the <RadListView> component instead of the <ListView>. Then, all you need is to add the attribute itemReorder="true". Like so:
<RadListView for="item in items" class="list-group" #itemTap="onItemTap"
itemReorder="true">
You can find your example working in this playground.
Also, the Vue docs for the RadListView are located here. These Vue docs are not as complete, but everything should work once you "translate" to Vue.