Nativescript Vue - RadListView 幽灵项目数组和错误的数据类型

如何解决Nativescript Vue - RadListView 幽灵项目数组和错误的数据类型

我正在开发一个 nativescript vue 应用程序，您可以在其中保存一笔付款和与此付款相关的 X 个人数，您可以为每个人指定一个自定义金额，当您保存所有金额时，自定义金额的总和为每个人指定的金额必须等于顶部指定的总金额。

我使用 ObservableArray 来更新界面，如我用来显示人员列表和相关字段的 RadListView 的 nativescript 文档所示。

两个问题：

1. 当我按下按钮添加一个人时，会在 ObservableArray 中推送一个带有一些默认数据的新项目。如果我为这个新人插入一个名字和一个自定义数量，然后我按下删除按钮，ObservableArray 它会正确更新 但是当我再次按下添加人员按钮时，它会使用新的默认数据更新数组，但在RadListView 生成的接口再次插入了先前的值，这些值与 ObservableArray 中存在的值不匹配。

事实上，当我按下保存按钮时，控制台日志向我显示了一个数组，其中包含由 addPerson 函数创建的默认数据集，但在界面上，我看到字段被按下删除按钮之前插入的值所赋值。

>

2. 按下保存按钮后，validateForm 函数会计算所有人员自定义金额的总和，如果它不等于总金额，则会显示错误对话框。似乎 ObservableArray 中第一个项目的自定义金额值（从一开始就已经存在的那个）它正确地打算作为数字，而不是插入到由 add person 函数动态生成的字段中的所有自定义金额值是用作字符串。

事实上，当我按下保存按钮并计算总和时，例如 14 和 16 的总和产生的结果将是“1416”而不是 30。 我当然可以在执行求和之前将字符串转换为浮点数，但我不明白为什么需要这种解决方法。

这是完整的代码：

<template>
  <Page>  
    <GridLayout columns="*" rows="auto,auto,*,auto">

      <Label row="0" text="total amount"/>
      <TextField row="1" v-model="payment.total" keyboardType="number" @textChange="updatePrice()"/>

      <RadListView row="2" layout="linear" orientation="vertical" for="item in payment.persons">
        <v-template>
          <GridLayout columns="*" rows="*,*" class="person">
            <Label row="0" :text="'person name ' + ($index+1)" />
            <TextField row="1" v-model="item.name" />
            <Label row="2" :text="'person amountEqual ' + ($index+1)" />
            <Label row="3" :text="item.amountEqual" />
            <Label row="4" :text="'person custom amount ' + ($index+1)" />
            <TextField row="5" v-model="item.customAmount" keyboardType="number" />
            <Button row="6" text="Delete person" @tap="deletePerson($index)"/>
          </GridLayout>
        </v-template>
      </RadListView>

      <Button row="3" text="Add person" @tap="addPerson()" />
      <Button row="4" text="Save" @tap="validateForm()" />

    </GridLayout>
  </Page>
</template>

<script>

  import { ObservableArray } from 'tns-core-modules/data/observable-array';

  export default {
    data() {
      return {
        payment:{
          total:10,persons: new ObservableArray([{
            name:"test1",amountEqual:10,customAmount:10
          }])
        }
      }
    },methods:{

      updatePrice(){
        for (let index = 0; index < this.payment.persons.length; index++) {
          var equalCost = (this.payment.total / this.payment.persons._array.length).toFixed(2)
          this.updateArray(index,"amountEqual",equalCost);
        }
      },updateArray(index,property,value){
        var temp= this.payment.persons.getItem(index);
        temp[property]=value;
        this.payment.persons.setItem(index,temp);
      },addPerson(){
        this.payment.persons.push({
          name:"",amountEqual:0,customAmount:0
        });
        this.updatePrice();
      },deletePerson(index){
        this.payment.persons.splice(index,1);
        this.updatePrice();
      },validateForm(){
        var customTotal=0;

        for (let index = 0; index < this.payment.persons.length; index++) {
          var person = this.payment.persons.getItem(index);
          customTotal = customTotal + person.customAmount;
        }

        console.log(this.payment.persons);
        console.log(customTotal);

        if(this.payment.total != customTotal){
          alert({
            title: "Error",message: "The total of the custom amount of the persons is not equal to the payment total amount!",okButtonText: "OK"
          });
        }
      }
    }
  }
</script>

<style scoped>
  .person{
    margin-top:50px;
    background-color: rgb(231,231,231);
    border-radius: 10px;
    padding: 40px 10px;
    margin-bottom: 50px;
  }
</style>

感谢您的帮助！