Vuetify.js v-data-table dynamic template

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,
        ...
      }

Zim Zim · Accepted Answer · 2020-04-25T12:10:24

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

Vuetify.js v-data-table dynamic template

1 Answers