vue 嵌套循环字段求和

在Vue.js中，如果你想要对嵌套循环的数据进行字段求和，通常你会在计算属性（Computed Property）或者在模板中使用`v-for`指令配合`v-bind:key`和JavaScript的数组方法如`reduce()`来实现。假设你有一个包含嵌套数组的对象结构，例如：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in parentList" :key="index">
        {{ item }}
        <ul>
          <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex">
            {{ subItem.value }}
          </li>
        </ul>
        <!-- 总和计算 -->
        <p>Total for this item: {{ itemSubTotal(item.subItems) }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentList: [
        { id: 1, subItems: [{ value: 5 }, { value: 10 }] },
        { id: 2, subItems: [{ value: 7 }, { value: 3 }] }
      ]
    };
  },
  computed: {
    // 使用 reduce 函数计算每个父项下所有子项的总和
    itemSubTotal(subItemsArray) {
      return subItemsArray.reduce((sum, current) => sum + current.value, 0);
    }
  }
};
</script>

在这个例子中，`itemSubTotal`是一个计算属性，它接收一个子项数组作为输入，并使用`reduce`函数累加子项的值。