Сетка Mini Pivot в Vue без внешней библиотеки

Question

Мне нужно создать супер простую маленькую сводную сетку за Vue. Все пакеты, которые я нахожу, настолько излишни для этого. У меня есть две строки и четыре столбца с данными, поступающими из простого JSON объекта.

Предположим, мои данные выглядят так:

[
{
    "currentRate": 0.41,
    "miles": 501,
    "nextRate": 0.42
},
{
    "currentRate": 0.43,
    "miles": 301,
    "nextRate": 0.44
},
{
    "currentRate": 0.47,
    "miles": 201,
    "nextRate": 0.48
},
{
    "currentRate": 0.5,
    "miles": 51,
    "nextRate": 0.51
}

]

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

При этом моя логика c:

Мы используем Vue 2 с Vuetify.

Answer 1

Я решил сделать что-то действительно простое.

Мой HTML:

<div id="app">
<v-app style="padding: 12px;" id="inspire">
    <div class="table-responsive">
        <table class="table-hover" style="width:800px;" v-if="matrix">
            <thead>
                <tr>
                    <th>Length of Haul in Miles</th>
                    <th>501+</th>
                    <th>301-500</th>
                    <th>201-300</th>
                    <th>50-200</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Current Rate</td>
                    <td>{{ currentRate[0] | simpleDecimal }}</td>
                    <td>{{ currentRate[1] | simpleDecimal }}</td>
                    <td>{{ currentRate[2] | simpleDecimal }}</td>
                    <td>{{ currentRate[3] | simpleDecimal }}</td>
                </tr>
                <tr>
                    <td>Next Rate</td>
                    <td>{{ nextRate[0] | simpleDecimal }}</td>
                    <td>{{ nextRate[1] | simpleDecimal }}</td>
                    <td>{{ nextRate[2] | simpleDecimal }}</td>
                    <td>{{ nextRate[3] | simpleDecimal }}</td>
                </tr>
            </tbody>
        </table>
</v-app>

и мой JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {  
    return {
            matrix: [
                    {
                            "currentRate": 0.41,
                            "miles": 501,
                            "nextRate": 0.42
                    },
                    {
                            "currentRate": 0.43,
                            "miles": 301,
                            "nextRate": 0.44
                    },
                    {
                            "currentRate": 0.47,
                            "miles": 201,
                            "nextRate": 0.48
                    },
                    {
                            "currentRate": 0.5,
                            "miles": 51,
                            "nextRate": 0.51
                    }
            ]     
    }
  },
  computed: {
    currentRate: function () {
            return this.matrix.map(function(rate) {
                return rate.currentRate;
            });
    },
    nextRate: function () {
            return this.matrix.map(function(rate) {
                return rate.nextRate;
            });
    },
  },
    filters: {
        simpleDecimal(value) {
            return value.toFixed(2).replace(/^0+/, '');
        }
    }
});

Результат: