CODEWITHSUNDEEP
vue.jsdatatablevuejs2vuetify.js
Ryan Hurley
Ryan Hurley

Reputation: 13

v-data-table ignores template when updating from Vuetify 1.5 => 2

I had a working v-data-table, and was able to customize the displayed rows with a template. That code no longer works once updating to vuetify 2.0 (codepen link below). I'm assuming something has changed with vuetify, but I'm not sure what.

Example

<v-data-table
    :headers="headers"
    :items="desserts"
    class="elevation-1">
  <template v-slot:items="props">
    <td>{{ props.item.name }}</td>
    <td class="text-xs-right">{{ props.item.calories }}</td>
    <td class="text-xs-right">{{ props.item.fat }}</td>
  </template>
</v-data-table>

In the example provided, I would only expect the first two columns to show (as it did in v1.5), however the default v-data-table view with all columns is still showing. Please help!

Upvotes: 1

Views: 2962

Answers (2)

bruce
bruce

Reputation: 1408

In vuetify v2, the items slot has been renamed, so for minimum changes, you just need to modify items to item in your original code.

<template v-slot:item="props">

vuetify v2 release notes

Upvotes: 3

Garry
Garry

Reputation: 2370

 <v-data-table
        :headers="headers"
        :items="desserts"
        :search="search"
        show-group-by
    >
        <template v-slot:item.action="{ item }">
            <v-icon
                small
                class="mr-2"
                color="blue"
                @click="edit(item)"
            >
                edit
            </v-icon>
            <v-icon
                small
                color="red"
                @click="delete(item.id)"
            >
                delete
            </v-icon>
        </template>
    </v-data-table>

in your script

<script>
export default {
    data() {
        return {
            search: "",
            headers: [
                {
                    text: 'Dessert (100g serving)',
                    align: 'left',
                    sortable: false,
                    value: 'name',
                },
                {text: 'Calories', value: 'calories'},
                {text: 'Fat (g)', value: 'fat'},
                {text: 'Carbs (g)', value: 'carbs'},
                {text: 'Protein (g)', value: 'protein'},
                {text: 'Iron (%)', value: 'iron'},
                {text: 'Action', value: 'action'},
            ],
            desserts: [
                {
                    id: 1,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                },
                {
                    id: 2,
                    name: 'Frozen Yogurt',
                    calories: 159,
                    fat: 6.0,
                    carbs: 24,
                    protein: 4.0,
                    iron: '1%',
                },

            ],
        };
    }, methods: {
        edit(id) {

        },
        delete(id) {

        },
    },
};

Upvotes: 0

Related Questions