Как вы создаете динамические c таблицы строк в vuejs?

Question

Как отобразить следующие данные в таблицу html с интервалами строк, используя vueJs?

Массив

[
  {
    "id": 1,
    "name": "Dog",
    "param_id": 5,
    "total": "45.000"
  },
  {
    "id": 2,
    "name": "Cat",
    "param_id": 5,
    "total": "45.000"
  },
  {
    "id": 3,
    "name": "Fish",
    "param_id": null, 
    "total": "55.000"
  },
  {
    "id": 4,
    "name": "Bird",
    "param_id": 2, 
    "total": "75.000"
  }
]

Это пример результата

Answer 1

Сначала вы можете использовать Laravel Коллекция groupBy, чтобы сгруппировать элементы коллекции по заданному ключу ('total')

Код контроллера

//...

$myElequentCollection = Model::where(...)->get();

$grouped = $myElequentCollection->groupBy('total');

$data = $grouped->toArray();

//outpout
/*
    [
        '45.000' => [
            ['id' => '1', 'name' => 'Dog', ...],
            ['id' => '2', 'name' => 'Cat', ...],
        ],
        '55.000' => [
            ['id' => '3', 'name' => 'Fish', ...],
        ],
        '75.000' => [
            ['id' => '4', 'name' => 'Bird', ...],
        ],
    ]
*/

//...

return view('viewName', compact('data'));

HTML пример кода

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    @foreach($data as $item)
    @foreach($item as $row)
    <tr>
      <td> {{ $row['id'] }}</td>
      <td> {{ $row['name'] }}</td>
      @if($loop->first )
      <td rowspan="{{ count($item) }}">{{ $row['total'] }}</td>
      @else
      <td>{{ $row['total'] }}</td>
      @endif
    </tr>
    @enforeach
    @endforeach
  </tbody>
</table>