Question

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

我保留现有的后端，其中包含3个表的简单restful api：Books，Places和pivot 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
      }
    }
  ]
}

在刀片中，我将以下一行内置于＃34;用于书籍中＃34;我喜欢它的循环因为它的简单：

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

我想在VueJS中做同样的事情，但不确定最简单的方法是什么，我很感激你的意见。

谢谢！

Answer 1

您可以使用Array#reduce创建一种总结数量的方法：

#include "tz.h"
#include <iostream>
#include <sstream>

int
main()
{
    using namespace date;
    std::string input = "20150410 121416";
    std::stringstream stream{input};
    stream.exceptions(std::ios::failbit);
    local_seconds tp;
    parse(stream, "%Y%m%d %H%M%S", tp);
    auto moscow_time = make_zoned("Europe/Moscow", tp);
    auto london_time = make_zoned("Europe/London", moscow_time);
    auto output = format("%F %T %z", london_time);
    std::cout << output << '\n';
}

2015-04-10 10:14:16 +0100

注意：由于您的methods: { sumOfQuantities: function(book) { return book.places.reduce(function(sum, next) { return sum + Number(next.pivot.quantity); }, 0); } }是字符串，因此您需要将其转换为数字（例如，使用quantity）。

然后，您可以使用Number()在模板中访问它，例如：

v-text

VueJS和数据透视表

1 个答案: