vue嵌套数组字段求和渲染

Vue.js 中，当你需要在一个模板中计算嵌套数组字段的总和并展示出来，可以利用 computed 属性和数组的 map() 或 reduce() 方法来实现。假设你有一个对象数组，每个对象都有一个包含数字的数组 `items`，你可以这样做：

<template>
  <div>
    <ul>
      <li v-for="item in parentArray" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ totalSum(item.items) }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentArray: [
        { id: 1, name: 'Item 1', items: [5, 10, 15] },
        { id: 2, name: 'Item 2', items: [7, 8, 9] },
      ]
    };
  },
  computed: {
    totalSum(array) {
      return array.reduce((sum, value) => sum + value, 0);
    }
  }
};
</script>

在这个例子中，`totalSum` 是一个 computed 计算属性，它接收一个数组作为参数，然后使用 `reduce()` 函数累加所有数值。在模板的循环 (`v-for`) 中，我们显示每个项目的名称以及其 `items` 数组的总和。