0
108
ViewsVuetify v-chip in v-data-table array
I am new to vuetify, and I would like to know how to make a v-chip to a specific value in my table. example :
<v-data-table
class="page__table"
:headers="headers"
:items="references"
>
<v-chip
v-for="reference in references"
:key="reference.id"
:color="color"
> {{reference.department}}
</v-chip>
and my code (composition api)
const mappedCatalog: ComputedRef<Record<string, any>> = computed(() => catalogStore.fullCatalog.map(reference => {
return {
...reference,
departments: reference.departments
return {
references: ref(mappedCatalog),
can you help me please
1 answers
Answer question0
Check this codesanbox I made: https://codesandbox.io/s/stack-71649799-v-chip-data-table-item-slow-z7p2db?file=/src/components/Example.vue
You can use the item slot of the data table. Some vuetify components comes with special sections for easier customization called slots, in this case the item slot of the data table let you customize individual colums content like this:
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template #item.calories="{ item }">
<v-chip dark color="red darken-2">{{ item.calories }}</v-chip>
</template>
<template #item.fat="{ item }">
<v-chip dark color="orange darken-2">{{ item.fat }}</v-chip>
</template>
</v-data-table>
If you're using es-lint you might encounter a warning mention something about the valid-v-slot rule, this is a known false positive that you can read more about in this GitHub issue thread, I personally just turn that es-lint rule off.
For more info about data table slots, check the vuetify documentation page.