0👍
I chose to do something really simple.
My 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>
and my 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+/, '');
}
}
});
Result:
Source:stackexchange.com