CODEWITHSUNDEEP
javascripttypescriptvue.jsvuetify.jsvue-composition-api
SnowPlatinum
SnowPlatinum

Reputation: 21

Vuetify 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

Upvotes: 0

Views: 1334

Answers (1)

cmfc31
cmfc31

Reputation: 1508

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>

Example

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.

Upvotes: 1

Related Questions