Vuetify v-data-table highlight row if there is duplicate value-CodePudding

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/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>



<div id="app">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :item-
    >
      <template #item="{ item }">
        <tr :>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </template>

    </v-data-table>
</div>

CodePudding user response：

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/[email protected]/dist/vuetify.min.css'>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js'></script>



<div id="app">
    <v-data-table
      :headers="headers"
      :items="desserts"
      :item-
    >
      <template #item="{ item }">
        <tr :>
          <td>{{ item.name }}</td>
          <td>{{ item.score }}</td>
        </tr>
      </template>

    </v-data-table>
</div>