vue动态添加一组input，然后再上面的 <span>{{ sum }} </span>里，计算对应input的总计。

Question

订单一初始话就在，订单二是动态创建，在订单总计里面写条数和金额的总计。

Answer 1

<template>
  订单总计：
  {{ totalValue }}
  元
  {{ totalCount }}
  条
  <span v-for="(item, index) in list" :key="index">
    <br />
      {{ `订单${index + 1}` }}
    <br />
      <input v-model="item.value" type="number" />
      <input v-model="item.count" type="number" />
      <input v-model="item.remarks" />
    <button @click="addItem">
      +
    </button>
    <button @click="removeItem(index)">
      -
    </button>
  </span>
</template>

<script setup>
import { ref, watchEffect } from 'vue'

const list = ref([
  { value: 0, count: 0, remarks: '' }
])
const totalValue = ref(0)
const totalCount = ref(0)

watchEffect(() => {
  totalValue.value = 0
  totalCount.value = 0
  
  list.value.forEach(item => {
    totalValue.value += +item.value
    totalCount.value += +item.count
  })
})
  
function addItem() {
  list.value.push({ value: 0, count: 0, remarks: '' })
}
  
function removeItem(index) {
  if (list.value.length <= 1) return
  list.value.splice(index, 1)
}
</script>

在线演示

Answer 2

监听输入事件

this.list = [{value:10},{value:20}];
this.total = list.reduce((acc,cur)=>{
    return acc + cur.value;
},0);