HTML table initialized with Vue.js : how to alternate row color

Question

I'm a beginner in Vue.js. I have a Vue.js script that stores some data in order to put it in a table. I can manage put it in the table, but I can't figure out how to alternate the color in the rows of the table (I just have to put a 'class="table-light"' in the ).

I tried doing something like "var i = 0;" and then I wanted to do something like : if(i % 2 == 0) { print ''; } else { ... } But that doesn't work so far because I don't think there's any function to print something, and I can't even get my variable to increment. If anyone could help me figure this out...

//Where I store the data
var demo = new Vue({
    el: '#demo',
    data: {
        searchQuery: '',
        gridColumns: ['nom', 'description', 'url'],
        gridData: [
            { nom: 'test', description: 'test', url: 'test' },
            { nom: 'test', description: 'test', url: 'test' },
            { nom: 'test', description: 'test', url: 'test' }
        ]
    }
})






<script type="text/x-template" id="grid-template">

    var i = 0;

    <table class="table table-hover">
        <thead>
            <tr class="table-title">
                <th v-for="key in columns"
                    @click="sortBy(key)"
                    :class="{ active: sortKey == key }">
                    {{ key | capitalize }}
                    <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
                    </span>
                </th>
            </tr>
        </thead>

        <tbody>

            <template v-for="entry in filteredHeroes">
 //-----------------------------------------------------------------
            //Where I'm supposed to add class="table-light"

                <tr>
//-----------------------------------------------------------------

                    <th scope="row"> {{entry['nom']}} </th>
                        <td> {{entry['description']}} </td>
                        <td>{{entry['url']}} <a v-bind:href="entry['url']" class="ni ni-curved-next pull-right"></a></td>
                </tr>
            </template>
        </tbody>
    </table>
</script>

.table-striped would suffice

Lawrence Cherone
– Lawrence Cherone

2019-06-17 11:45:12 +00:00
Commented Jun 17, 2019 at 11:45 — Lawrence Cherone
– Lawrence Cherone, Commented Jun 17, 2019 at 11:45

Stephen Thomas · Accepted Answer · 2019-06-17 11:45:57Z

3

Add an index to the v-for

<template v-for="(entry, index) in filteredHeroes">
    <tr :class="{'table-light': index % 2}">

answered Jun 17, 2019 at 11:45

Stephen Thomas

14.1k2 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Elodie G. Over a year ago

Hey, thank you so much : it works ! But can you tell me where "index" comes from ? :)

jdost_26 Over a year ago

it it the index in the filterdHeroes array, and you can indicate it in the second component as shown in the v-for phrase.

Pawel Kaczmarek · Accepted Answer · 2024-05-22 19:23:06Z

1

this works for me:


.table tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

answered May 22, 2024 at 19:23

Pawel Kaczmarek

213 bronze badges

Collectives™ on Stack Overflow

HTML table initialized with Vue.js : how to alternate row color

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related