Vuetify.js v-data-table dynamic template - vue.js

Question

In my Vue.js project I have a v-data-table.
If cell content is true I would like to replace with the green check_circle icon.
Why this code isn't working?
<template v-for="header in headers" v-slot:item[header.value]="{ item }">
<v-icon v-if="item[header.value]" color="green">check_circle</v-icon>
</template>
Now the table is:
EDIT 1
<v-data-table
:loading="loading"
:headers="headers"
:items="items"
:items-per-page="items_per_page"
:search="search"
no-data-text="Non ci sono elementi"
no-results-text="Non ci sono elementi filtrati"
loading-text="Caricamento in corso..."
:footer-props="footerProps"
class="elevation-1">
<template v-for="header in headers" v-slot:item[header.value]="{ item }">
<v-icon v-if="item[header.value]" color="green">check_circle</v-icon>
<v-icon v-else color="red">cancel</v-icon>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
#click="editItem(item)"
>mdi-pencil</v-icon>
<v-icon
small
#click="deleteItem(item)"
>mdi-delete</v-icon>
</template>
<template v-slot:top>
<v-toolbar flat color="white">
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" #click="newItem" v-on="on">New Item</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<!-- modifica elemento -->
<v-row v-if="editedIndex > -1">
<v-col v-for="(key,i) in keys_visible" :key="key" v-show="headers_visible[i].visible == true" cols="12" sm="6" md="4">
<v-text-field v-if="headers_visible[i].type == 'varchar'" v-model="editedItem[key]" :label="headers_visible[i].text" :disabled="!headers_visible[i].editable"></v-text-field>
<v-switch v-else-if="headers_visible[i].type == 'bit'" v-model="editedItem[key]" :label="headers_visible[i].text"></v-switch>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text #click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text #click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:no-data>
<v-btn color="primary" #click="initialize">Reset</v-btn>
</template>
</v-data-table>
headers is like this:
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Actions', value: 'actions', sortable: false },
]
a item is like this:
item: {
cleaned: true,
name: '',
usable: 0,
...
}

Answer 1

To iterate the headers dynamically for all items you'd need to use the body slot...
<template v-slot:body="{ items }">
<tr v-for="idx in items">
<td v-for="header in headers" class="text-left font-weight-black">
<v-icon v-if="idx[header.value]" color="green">check_circle</v-icon>
</td>
</tr>
</template>
Demo: https://codeply.com/p/W0vKEyRGRO
Also see: Vuetify Datatable - Enable content editing on all columns