Hello friends, I have a table where I show the data of my array, and what I want is to color each row by groups (by the n_comp field) and give it the zebra effect
That is, my first two rows with the n_comp 00000001 should have the 'bg-dark' class, the third no longer because it has a different series, the fourth should have the 'bg-dark' class and the two should no longer have the class
Vue.config.productionTip = false;
Vue.config.devtools = false
var app = new Vue({
el: '#app',
data: {
array: [{n_seri:'001','n_comp':'00000001',producto:'agua'},
{n_seri:'001','n_comp':'00000001',producto:'gaseosa'},
{n_seri:'002','n_comp':'00000002',producto:'leche'},
{n_seri:'001','n_comp':'00000003',producto:'agua'},
{n_seri:'003','n_comp':'00000004',producto:'cafe'},
{n_seri:'004','n_comp':'00000004',producto:'gaseosa'}]
}
})
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div id="app">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Serie</th>
<th scope="col">Comprobante</th>
<th scope="col">Cliente</th>
</tr>
</thead>
<tbody>
<tr v-for="(a,index) in array" :class="a.n_comp != (Object.assign({}, array[index+1])).n_comp ? 'bg-dark' : ''">
<th v-text="index + 1"></th>
<td v-text="a.n_seri"></td>
<td v-text="a.n_comp"></td>
<td v-text="a.producto"></td>
</tr>
</tbody>
</table>
</div>
I have been trying in the following way but I do not get it, if you could help me I would be very grateful
Within the loop it will be very complicated to be able to group rows that repeat a value, because you need two variables:
You can create a custom object for those variables and access it with this.$options.PropertyName that you're going to use in a method to know which class to use on each element.