Таблица HTML, инициализированная с помощью Vue.js: как изменить цвет строки - PullRequest
Новая
       37

Таблица HTML, инициализированная с помощью Vue.js: как изменить цвет строки

0 голосов
/ 17 июня 2019

Я новичок в Vue.js.У меня есть сценарий Vue.js, который хранит некоторые данные, чтобы поместить их в таблицу.Я могу положить его в таблицу, но я не могу понять, как чередовать цвет в строках таблицы (мне просто нужно поместить 'class = "table-light" в).

Я пытался сделать что-то вроде "var i = 0;"а затем я хотел сделать что-то вроде: if (i% 2 == 0) {print '';} else {...} Но пока это не работает, потому что я не думаю, что есть какая-либо функция для печати чего-либо, и я даже не могу заставить мою переменную увеличиваться.Если бы кто-нибудь мог помочь мне понять это ... 

//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>

1 Ответ

1 голос
/ 17 июня 2019

Добавить индекс к v-for

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