Vue.js 无外部库的Vue中的迷你轴网格

我需要在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
}

]

我如何制作一个这样的表格/网格

这就是我的逻辑：

---

我们将Vue 2与Vuetify一起使用。

我选择做一些非常简单的事情

我的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>

结果:

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+/, '');
        }
    }
});