我需要帮助-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>

导出默认值{
数据（）{
返回{
项目：[]
};
},
方法：{
附加项（）{
让项={name:：}；
此.items.push（item）；
},
删除项目（索引）{
本标准中的项目拼接（索引1）；
}
}
};