I am using "Console, Firm, Release, and Units Sold" as a data-title for the mobile view of the table. Example display:

(Mobile Table)
Console: PlayStation 2
Firm: Sony
Release: 2000
Units: 155 Million

Console: DS
Firm: Nintendo
Release: 2004
Units: 154 Million

etc, etc

But for desktop view of the table I am using "Console, Firm, Release, and Units Sold" as Table Header and just displaying once. But you can see I list them twice below in vue.js file.

Wondering if there is a better way to do this without having to declare those 4 variables twice. tableHeader in the vue.js has header: 'Console', header: 'Firm', etc. It would be awesome if I could do something like this for tableHeader passing the variables:

header: consoleDataTitle, header: firmDataTitle, etc since they are already declared in the JSON right above.

Also I am new to Vue so feel free to pass any other best practice suggestions too, thank you.

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/[email protected]/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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Reference 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/[email protected]/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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>