NativeScript Vue中的重新排序列表答案

【问题标题】：ReOrder List in NativeScript VueNativeScript Vue中的重新排序列表
【发布时间】：2019-08-02 05:27:33
【问题描述】：

我是 nativescript-vue 的新手，但我有一个应用程序可以显示从 api 获取的漂亮列表。

现在我希望能够让用户重新排序。

文档似乎陈旧，所以我将发布这个至少显示但无法重新排序的列表示例：

 <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>

文档建议它应该很简单：Item Reorder。但我没有让这些碎片组合在一起。所以也许我们可以在这里得到一些简洁的代码？

【问题讨论】：

标签： nativescript-vue

【解决方案1】：

首先，您需要使用<RadListView> 组件而不是<ListView>。然后，您只需添加属性itemReorder="true"。像这样：

<RadListView for="item in items" class="list-group" @itemTap="onItemTap"
            itemReorder="true">

您可以在 this playground 中找到您的示例。

此外，RadListView 的 Vue 文档位于 here。这些 Vue 文档并不完整，但是一旦你“翻译”到 Vue，一切都应该可以工作。

【讨论】：

谢谢，蒂亚戈。是的，RadLustView 是我想要的，但我尝试的一切都引发了错误。操场示例给出了同样的错误：
您是否在手机中测试了 Playground 示例？它在这里工作。不是<lv:Radlistview>，而是<RadListView>。
是的，我在手机上查看了您的评论。当我点击链接时，它打开了预览并抛出了那个错误（刚刚时间戳）。
但是，当我在笔记本电脑上查看操场并用 iPhone 扫描二维码时，它工作了。我还成功地将其重新创建为一个新项目，直到我尝试按照文档中的说明进行操作。让我再摆弄一下。
我无法在干净的应用程序中成功安装和使用 RadListView。（是我在 Windows 上吗？）。但是我在这里下载了操场，在其中构建了我的代码，并且成功了！谢谢，蒂亚戈。非常感谢您的耐心。