Javascript Vue在表单中使用计算属性

我有一个动态表单，允许用户添加他们需要的项目、数量和每个项目的成本

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

---

如何将计算属性传递给表单，以便将其作为表单的一部分提交？

您可以像这样自行处理提交

提交

  computed: {
      totalCost: function () {
        let total = 0
          for (let i = 0; i < this.inputs.length; i++){

          total += this.inputs[i].cost * this.inputs[i].quantity
          }

          return total

      }
  },

 data () {
        return {
            inputs: [{
            item: '',
            quantity: '',
            cost: '',
            maintenance_id: this.maintenance_id,
            total_cost: this.totalCost,
        }],