vue嵌套数组字段相加

在Vue.js中，如果你想对数组中的某个字段值进行累加，特别是在数组包含其他嵌套数组的情况下，可以使用递归函数配合v-for指令来完成。假设你有一个数据结构类似这样的对象：

{
  "items": [
    {
      "name": "item1",
      "subItems": [
        { "value": 10 },
        { "value": 20 }
      ]
    },
    {
      "name": "item2",
      "subItems": [
        { "value": 30 },
        { "value": 40 }
      ]
    }
  ]
}

你可以创建一个计算属性（Computed Property）或者直接在模板里使用JavaScript，比如这样：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.name">
        {{ item.name }}
        <span>子项总和：{{ calculateSum(item.subItems) }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ... // 上述示例的数据
    };
  },
  computed: {
    calculateSum(subItemsArray) {
      return subItemsArray.reduce((sum, subItem) => sum + subItem.value, 0);
    }
  }
};
</script>

在这个例子中，`calculateSum`方法会遍历`subItemsArray`，通过`reduce`函数将所有`value`属性相加。每次循环都会更新子项总和。