Can I customize the key names in the Vuetify v-data-iterator component?
https://i.sstatic.net/Znv41.jpg
I need to change the header names without altering the property names inside the "items" array. How can I achieve this when dealing with special characters like ä, ë, ß, etc?
HTML:
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-data-iterator
:items="items"
:items-per-page.sync="itemsPerPage"
:page.sync="page"
:search="search"
:sort-by="sortBy.toLowerCase()"
:sort-desc="sortDesc"
hide-default-footer
>
...
</v-data-iterator>
</v-container>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
...
},
computed: {
numberOfPages () {
...
},
filteredKeys () {
...
},
},
methods: {
nextPage () {
...
},
formerPage () {
...
},
updateItemsPerPage (number) {
...
},
},
})
This approach is not working for me:
keys: [
'Custom name for Name',
'Custom name for Calories',
...
],
items: [
{name: 'Frozen Yogurt', calories: 159, ...},
...
]