Javascript 如何在vuetify datatable中显示数据

我试图使用Vuetify datatable显式创建表，这样我就可以更好地控制它，但我似乎没有得到它。我有下面的代码，但由于某种原因，%符号没有显示在表中

<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>

{{props.item.artpack.name}
{{props.item.email}
{{props.item.valid}
{{props.item.expiration\u time}
{{props.item.download_count}
英镑{道具.物品.艺术品包装.价格}
{{props.item.action}

和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>

导出默认值{
数据：（）=>({
对话：错，
标题：[
{
文字：“艺术包名称”，
对齐：“左”，
可排序：是的，
值：“artpack.name”，
宽度：“20%”
},
{text:'Customer Email'，value:'Email'，sortable:true，width:'20%}，
{text:'Valid'，value:'Valid'，sortable:true，width:'10%}，
{text:'expiration 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:[]，
选择：[“是”、“否”]，
编辑索引：-1，
编辑：{
有效：“”，
行动：“”，
},
默认项目：{
有效：“”，
行动：“”，
},
}),

如果使用新的Vuetify版本，则需要为每个标头定义一个插槽

英镑{item.artpack.price}

---

对于需要显示修改数据的其余字段，您使用相同的概念。

您正在查找

项

插槽

<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>

{{item.artpack.name}
{{item.email}
{{item.valid}
{{item.expiration\u time}
{{item.download_count}
英镑{item.artpack.price}
{{item.action}

---

那么，你想说的是，所有的数据都显示得很完美，除了没有

。

符号？是的，没错。小问题，但只是想知道是否可以解决。老实说，我不能重复这个问题：你用的是哪个版本的Vuetify？

<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>