0

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

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

两个问题：

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

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

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

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

这是完整的代码：

<template>
  <Page>  
    <GridLayout columns="*" rows="auto,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>

感谢您的帮助！

4

0 回答 0