[Vuejs]-Vuetify: Color data-table rows that pass check

by

0👍

You need something like this

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      headers: [
        {
          text: 'Task',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Valid/not valid', value: 'isValid' },
      
      ],
      tasks: [
        {
          id: 1,
          name: 'This is task 1',
          isValid: false,
        },
        {
          id: 2,
          name: 'This is task 2',
          isValid: true,
        },
        {
          id: 3,
          name: 'This is task 3',
          isValid: false,
        },
        {
          id: 4,
          name: 'This is task 4',
          isValid: true,
        },

      ],
    }
  },
  methods: {
     getRowClass(item) {
      if(item.isValid== false){
        return 'red'
      } 
    },
  },
})
.invalid-row {
  background-color: red !important;
  border-color: red !important;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
   
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="tasks"
      class="elevation-1"
      :item-class="getRowClass"            
    >
    </v-data-table>
  </v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Leave a comment