[Vuejs]-Vue.js: How do you change an icon and background color depending on the value of an item in a data table row?

by

0👍

Looks like you are using vuetify so this should be possible. You can use slots to customize certain colums. This could be like this in your case:

<v-data-table
   :headers="headers"
   :items="politicians"
   :search="search"
>
   <template v-slot:item.party="{item}" :class="functionWhichSetsClass(item.party)">
      {{functionWhichShowsIcon(item.party)}}
   </template>
</v-data-table>

In this example you only customize the column for party. So you can change the additional content and how it looks.

Leave a comment