Vue动态表单

Question

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

<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
          }
      }
  }
}

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

Answer 1

for-loop中的return语句使其在计算第一件商品的成本后立即返回。

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

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