How can I customize the slot in v-data-iterator to change the color and content of certain sections?
Desired Customization: https://i.sstatic.net/bqdfL.jpg
This is what I have tried so far:
<!-- Custom slot for Calories -->
<template v-slot:item="calories">
<v-list-item>
<v-list-item-content :class="{ 'blue--text': sortBy === key }">
<!-- Custom value here (green color) -->
<span style="color: green;">Calories:</span>
</v-list-item-content>
<v-list-item-content class="align-end" :class="{ 'blue--text': sortBy === key }">
<!-- Custom value here (+ kcal) -->
{{ item.calories }} kcal
</v-list-item-content>
</v-list-item>
</template>
What should be the correct "v-slot:" attribute value for the Calories section? Is there an alternative way to customize specific sections?
HTML code:
<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-app>
</div>
JS code:
new Vue({
el: '#app',
...
items:[
// List of food items with their nutritional values
]
})
Full demo code: CodePen Demo