我需要帮助-Nativescript-vue listview没有删除正确的项目

如何解决我需要帮助-Nativescript-vue listview没有删除正确的项目

我是NativeScript-Vue的新手。我正在尝试创建一个带有按钮的ListView来添加项目，并从按钮中删除项目。添加项目后，输入文本并单击删除按钮，将从列表视图中删除错误的项目。我认为listview正在重用（回收）项目，但是我不确定如何解决此问题。

这是代码...

<template>
  <Page ref="pageRef">
    <ActionBar>
      <Label text="Test List View"></Label>
    </ActionBar>

    <StackLayout ref="context">
      <ListView for="item in items">
        <v-template>
          <GridLayout columns="50,*" rows="30">
            <TextField col="0" row="0" :text="item.name" hint="enter name" />
            <button
              col="1"
              row="0"
              text="Delete"
              horizontalAlignment="right"
              @tap="deleteItem($index)"
            />
          </GridLayout>
        </v-template>
      </ListView>
      <GridLayout columns="*" rows="auto">
        <button col="0" row="0" text="Add" @tap="addItem()" />
      </GridLayout>
    </StackLayout>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },methods: {
    addItem() {
      let item = { name: "" };
      this.items.push(item);
    },deleteItem(index) {
      this.items.splice(index,1);
    }
  }
};
</script>