How to display data in vuetify datatable

0
votes

I'm trying to use Vuetify datatable to explicitly create the table so I have more control over it but I don't seem to be getting it. I have the below code but for some reason, the £ sign isn't showing the table

<template>
    <v-data-table
        :headers="headers"
        :items="boughtArtPacks"
        sort-by="expiration_time"
    >
    <template slot="items" slot-scope="props">
        <td>{{props.item.artpack.name}}</td>
        <td>{{props.item.email}}</td>
        <td>{{props.item.valid}}</td>
        <td>{{props.item.expiration_time}}</td>
        <td>{{props.item.download_count}}</td>
        <td>£{{props.item.artpack.price}}</td>
        <td>{{props.item.action}}</td>
    </template>
    </v-data-table>
</template>

and javascript

<script>
    export default {
        data: () => ({
            dialog: false,
            headers: [
                {
                    text: 'Art Pack Name',
                    align: 'left',
                    sortable: true,
                    value: 'artpack.name',
                    width: '20%'
                },
                { text: 'Customer Email', value: 'email', sortable: true, width: '20%' },
                { text: 'Valid?', value: 'valid', sortable: true, width: '10%' },
                { text: 'Expiry Date', value: 'expiration_time', sortable: true, width: '10%' },
                { text: 'Download Count', value: 'download_count', sortable: true, width: '10%' },
                { text: 'Pack Price', value: 'artpack.price', sortable: true, width: '10%' },
                { text: 'Actions', value: 'action', sortable: false, width: '10%' },
            ],
            boughtArtPacks: [],
            select:['Yes', 'No'],
            editedIndex: -1,
            editedItem: {
                valid: '',
                action: '',
            },
            defaultItem: {
                valid: '',
                action: '',
            },
        }),
</script>
2
javascriptvue.jsdatatablevuetify.js
so, what you are saying is, all the data shows perfectly, except no £ sign? - Jaromanda X
Yes thats right. Small issue but just wondered if it could be done - Matt B
I can't duplicate the problem to be honest :p - Jaromanda X
Which version of Vuetify are you using? - Frank Furter

2 Answers

0
votes

If you are using new Vuetify version you need to define a slot for each header.

<template v-slot:item.price="{item}"> £{{item.artpack.price}} </template> 

headers:[{text: 'Pack Price', value: 'price'}]

You use same concept for the rest of the fields where you need modified data displayed.

0
votes

You're looking for the item slot...

<template v-slot:item="{ item }">
    <tr>
        <td>{{item.artpack.name}}</td>
        <td>{{item.email}}</td>
        <td>{{item.valid}}</td>
        <td>{{item.expiration_time}}</td>
        <td>{{item.download_count}}</td>
        <td>£{{item.artpack.price}}</td>
        <td>{{item.action}}</td>
    </tr>
</template>

Demo