- I would like to highlight the score if it is equal to 100.
By this I can do this by using if (item.score == 100) return
‘style-1’;
- I would like to highlight the names if they have the same name.
You can see that in json desserts, they have the same name "Frozen"
twice. I want to highlight both of them.
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
customRowClass(item) {
if (item.score == 100) return 'style-1';
// How to highlight duplicate names?
// if (item.name == item.name) return 'style-2';
},
},
data () {
return {
headers: [],
desserts: [
{
name: "Frozen",
score: 66,
},
{
name: "Tom",
score: 100,
},
{
name: "Eclair",
score: 100,
},
{
name: "Frozen",
score: 89,
},
]
}
},
}).style-1 {
background-color: rgb(215, 215, 44) !important;
}
.style-2 {
background-color: rgb(114, 114, 67) !important;
}<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>
<div id="app">
<v-data-table
:headers="headers"
:items="desserts"
:item-class="customRowClass"
>
<template #item="{ item }">
<tr :class="customRowClass(item)">
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
</tr>
</template>
</v-data-table>
</div>
>Solution :
You can use the Array#Filter function and check if there is more than 1 items that check the condition.
this.desserts.filter(x => x.name === item.name).length > 1
Finally, you can order your if to put the most important hilight at the top of the function
new Vue({
el: '#app',
vuetify: new Vuetify(),
methods: {
customRowClass(item) {
if (item.score == 100) return 'style-1';
if (this.desserts.filter(x => x.name === item.name).length > 1) return "style-2"
},
},
data () {
return {
headers: [],
desserts: [
{
name: "Frozen",
score: 66,
},
{
name: "Tom",
score: 100,
},
{
name: "Eclair",
score: 100,
},
{
name: "Frozen",
score: 89,
},
]
}
},
}).style-1 {
background-color: rgb(215, 215, 44) !important;
}
.style-2 {
background-color: rgb(114, 114, 67) !important;
}<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script>
<div id="app">
<v-data-table
:headers="headers"
:items="desserts"
:item-class="customRowClass"
>
<template #item="{ item }">
<tr :class="customRowClass(item)">
<td>{{ item.name }}</td>
<td>{{ item.score }}</td>
</tr>
</template>
</v-data-table>
</div>