VueJS 和数据透视表答案

【问题标题】：VueJS sum pivot tableVueJS 和数据透视表
【发布时间】：2016-08-08 02:26:52
【问题描述】：

我正在学习 VueJS，并且正在移植我在 Laravel 中编写的一个非常简单的应用程序，该应用程序使用刀片作为模板引擎。

我保留了现有的后端，它由一个简单的 3 个表的 api 组成：Books、Places 和一个枢轴 Books_Places。

json 看起来像这样：

books:
{
  "id": 1,
  "title": "foo bar",
  "places": [
    {
      "id": 1,
      "name": "library 1",
      "pivot": {
        "book_id": "1",
        "place_id": "1",
        "quantity": "50",
        "id": 1
      }
    },
    {
      "id": 2,
      "name": "library 2",
      "pivot": {
        "book_id": "1",
        "place_id": "2",
        "quantity": "75",
        "id": 2
      }
    }
  ]
}

在 Blade 中，我将以下行内置到“书中书”循环中，我喜欢它，因为它很简单：

{{ $book->places->sum('pivot.quantity') }}

我正在尝试在 VueJS 中完成相同的操作，但不确定最简单的方法是什么，我会感谢您的意见。

谢谢！

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

您可以创建一个方法来使用Array#reduce 来汇总数量：

methods: {
    sumOfQuantities: function(book) {
       return book.places.reduce(function(sum, next) {
           return sum + Number(next.pivot.quantity);
       }, 0);
    }
}

注意：由于您的quantity 是一个字符串，您需要将其转换为数字（例如使用Number()）。

然后您可以在模板中使用v-text 访问它，例如：

<div v-for="book in books">
    <div v-text="sumOfQuantities(book)"></div>
</div>

【讨论】：