时间戳

首页 > 解决方案 > vue动态表单

javascript - vue动态表单

问题描述

我有一个动态表单，用户可以输入一个项目，所需的数量和每个项目的成本，如下所示：

<form @submit.prevent="submit">

  <div class="form-group" v-for="(input,k) in inputs" :key="k">

    <input type="text" class="form-control" v-model="input.item">
    <input type="text" class="form-control" v-model="input.quantity">
    <input type="text" class="form-control" v-model="input.cost">
    <span>
      <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">Remove</i>
      <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">Add fields</i>
    </span>
  </div>
  <button>Submit</button>

</form>

我想计算所有添加项目的总成本。我试过了

export default {
  methods: {
      totalCost: function () {
          for (let i = 0; i < this.inputs.length; i++) {
              return this.inputs[i].cost*this.inputs[i].quantity
          }
      }
  }
}

但这只是给了我第一项的总成本。如何获取用户输入的所有项目的总成本？

标签： javascriptvue.jsvue-component

解决方案

-loop 中的return语句for导致它在计算第一个项目的成本后立即返回。

一个快速的解决方法是删除它return，并使用局部变量累积总和：

let total = 0
for (let i = 0; i < this.inputs.length; i++){
  total += this.inputs[i].cost * this.inputs[i].quantity
}
return total

推荐阅读