0
Conditionally sometimes we need to put one title
in a table row to inform the user about what is happening, some status, etc.
Using vuetify, I would like to add this title in some lines conditionally
Example if any data was false add the title
My table is like this:
<template>
<v-row>
<v-data-table :headers="headers" :items="lista" :items-per-page="10" class="elevation-1" />
</v-row>
</template>
Script
export default {
data: ()=>({
headers: [
{ text: 'ID', value: 'id_client', align: 'center', class: 'primary white--text', width: 80, sortable: false},
{ text: 'NOME', value: 'NOME', align: 'center', class: 'primary white--text', width: 100},
{ text: 'NASCIMENTO', value: 'dt_nascimento', align: 'center', class: 'primary white--text', width: 180
],
lista: [
{id_client: 1, nome: 'Carlos', '04/08/1985', status: true},
{id_client: 2, nome: 'Bruno', '04/08/1990', status: true},
{id_client: 3, nome: 'Brito', '04/08/1995', status: false},
]
})
}
I managed to do so
<v-data-table
:headers="headers"
:items="lista"
:items-per-page="10"
class="elevation-1">
<template v-slot:item="props">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<tr :class="{
'red--text': props.item.error,
'blue--text': props.item.update
}"
v-on="on"
v-bind="attrs">
<td class="text-xs-left">{{ props.item.line }}</td>
<td class="text-xs-left">{{ meses[ props.item.month - 1] ? meses[ props.item.month - 1].name : ''}}</td>
<td class="text-xs-left">{{ props.item.year }}</td>
</tr>
</template>
<span>teste</span>
</v-tooltip>
</v-data-table>
Adding the v-tooltio, but I would like to add conditionally without using the html