'How to Format Vuetify v-data-table Columns Using More Than One Header Filter to Customize Slots
Within a v-data-table, I want to do this...
<template
v-for="header in headers.filter((header) =>
header.hasOwnProperty('showAsCheckbox')
)"
v-slot:[`item.${header.value}`]="{ header, item }"
>
<v-simple-checkbox
v-model="item[`${header.value}`]"
@input="
handleCheckboxChanged({
item,
header,
})
"
></v-simple-checkbox>
</template>
<template
v-for="header in headers.filter((header) =>
header.hasOwnProperty('formatter')
)"
v-slot:[`item.${header.value}`]="{ header, value }"
>
<span class="my-0">{{ header.formatter(value) }}</span>
</template>
...in other words, use two header filters to accomplish two different kinds of formatting for columns with different custom header properties. Each filter works if it is the only filter in the code. But when there are two filters, only the last one takes effect. Is there a way to use this technique with more than one header filter?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
