传递Vue/JSON中的变量

Question

我正在使用"控制台，公司，释放，和单位销售"；作为表的移动视图的数据标题。示例显示：

(Mobile Table)
Console: PlayStation 2
Firm: Sony
Release: 2000
Units: 155 Million
Console: DS
Firm: Nintendo
Release: 2004
Units: 154 Million
etc, etc

但是对于我正在使用的表的桌面视图；控制台，公司，释放，和单位销售"；作为表格标题，只显示一次。但你可以看到我在下面的vue.js文件中列出了两次。

想知道是否有更好的方法可以做到这一点，而不必两次声明这4个变量。vue.js中的tableHeader有header:"Console"、header:"Firm"等。如果我能为传递变量的tableHeader:做这样的事情，那就太棒了

header:consoleDataTitle、header:firmDataTitle等，因为它们已经在上面的JSON中声明了。

此外，我是Vue的新手，所以也可以随时传递任何其他最佳实践建议，谢谢。

var basic = new Vue({
el: '#basic-table-container',
data: {
consoleDataTitle: 'Console',
firmDataTitle: 'Firm',
releaseDataTitle: 'Release',
unitsDataTitle: 'Units Sold',
tableHeader: [
{
header: 'Console'
},
{
header: 'Firm'
},
{
header: 'Release'
},
{
header: 'Units Sold'
}
],
items: [
{ 
console: 'PlayStation 2',
firm: 'Sony',
release: '2000',
units: '155 Million'
},
{ 
console: 'DS',
firm: 'Nintendo',
release: '2004',
units: '154 Million'
},
{ 
console: 'Game Boy',
firm: 'Nintendo',
release: '1989',
units: '119 Million'
},
{ 
console: 'PlayStation 4',
firm: 'Sony',
release: '2013',
units: '116 Million'
},
{ 
console: 'PlayStation',
firm: 'Sony',
release: '1994',
units: '103 Million'
},
{ 
console: 'Wii',
firm: 'Nintendo',
release: '2006',
units: '102 Million'
}
]
}
})

<script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
<div id="basic-table-container">
<table class="table">
<thead>
<th v-for="table in tableHeader" :key="table.header">{{ table.header }}</th>
</thead>
<tbody>
<tr v-for="item in items" :key="item.console">
<td :data-title="consoleDataTitle">{{ item.console }}</td>
<td :data-title="firmDataTitle">{{ item.firm }}</td>
<td :data-title="releaseDataTitle">{{ item.release }}</td>
<td :data-title="unitsDataTitle">{{ item.units }}</td>
</tr>
</tbody>
</table>
</div>

Answer 1

参考tableHeaders[idx].header

var basic = new Vue({
el: '#basic-table-container',
data: {
tableHeader: [
{
header: 'Console'
},
{
header: 'Firm'
},
{
header: 'Release'
},
{
header: 'Units Sold'
}
],
items: [
{ 
console: 'PlayStation 2',
firm: 'Sony',
release: '2000',
units: '155 Million'
},
{ 
console: 'DS',
firm: 'Nintendo',
release: '2004',
units: '154 Million'
},
{ 
console: 'Game Boy',
firm: 'Nintendo',
release: '1989',
units: '119 Million'
},
{ 
console: 'PlayStation 4',
firm: 'Sony',
release: '2013',
units: '116 Million'
},
{ 
console: 'PlayStation',
firm: 'Sony',
release: '1994',
units: '103 Million'
},
{ 
console: 'Wii',
firm: 'Nintendo',
release: '2006',
units: '102 Million'
}
]
}
})

<script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
<div id="basic-table-container">
<table class="table">
<thead>
<th v-for="table in tableHeader" :key="table.header">{{ table.header }}</th>
</thead>
<tbody>
<tr v-for="item in items" :key="item.console">
<td :data-title="tableHeader[0].header">{{ item.console }}</td>
<td :data-title="tableHeader[1].header">{{ item.firm }}</td>
<td :data-title="tableHeader[2].header">{{ item.release }}</td>
<td :data-title="tableHeader[3].header">{{ item.units }}</td>
</tr>
</tbody>
</table>
</div>