How do I make dynamic item slots in Vuetify datatable? - vue.js

Question

I'm learning to code and have a Vuetify datatable where I want to change boolean values in the table to icons. I want to make the table dynamic so I can reuse it as a component, passing props to it depending on page. I can get headers and other stuff to pass as props fine but passing props into the v-slot item in child table is problematic.
I am currently passing a 'booleans' prop from parent which has an array of objects including names of the columns that I want to change to icons and the true/false icons.
Here is the 'boolean' prop array from parent. I've stripped everything else out for readability.
booleans: [
{
name: "wo",
iconTrue: "mdi-account",
iconFalse: "mdi-office-building",
},
{
name: "ep",
iconTrue: "mdi-account",
iconFalse: "mdi-office-building",
}]
The child component is a vuetify datatable.
<template>
<div>
<v-data-table
:headers="headers"
:items="gotData"
:items-per-page="25"
:sort-by="sort"
dense
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
#click:row="handleClick"
class="elevation-1"
>
<template v-for="(bool, i) in booleans" v-slot:[boolNames[i]]="{ item }">
<v-icon :key="i" class="mr-3">
{{ boolNames[i] ? bool.iconTrue : bool.iconFalse }}</v-icon>
</template>
</v-data-table>
</div>
</template>
Script
<script>
export default {
data: () => ({
search: "",
loading: "true",
dialog: false,
gotData: [],
}),
props: {
dataSource: {
type: String,
},
headers: {
type: Array,
},
tableTitle: {
type: String,
},
pageURL: {
type: String,
},
sort: {
type: String,
},
booleans: {
type: Array,
},
},
created() {
this.initialize();
},
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
boolNames: function () {
return this.booleans.map(function (bool) {
return "item." + bool.name;
});
},
},
methods: {
async initialize() {
const response = await this.$axios
.$get(this.dataSource)
.then((response) => {
this.gotData = response.data;
})
.catch(function (error) {
console.log(error);
});
this.loading = false;
},
async addItem(item) {
this.editedIndex = this.dataSource.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
this.$axios({
method: "post",
url: this.dataSource,
data: this.item,
})
.then((response) => {
this.gotData = response.data;
})
.catch(function (error) {
console.log(error);
});
},
handleClick(item) {
this.$router.push(this.pageURL + item.id);
},
},
};
</script>
boolNames[i] returns item.wo and item.ep as I want it to but vuetify sees these as strings not props and so the ternary always reads true and all cells in table are the true icon.
If I hard code item.wo into the template it will work properly, e.g.
<template v-for="(bool, i) in booleans" v-slot:[boolNames[i]]="{ item }">
<v-icon :key="i" class="mr-3">
{{ item.wo ? bool.iconTrue : bool.iconFalse }}</v-icon>
</template>
I've tried all sorts of other ways to get this to work but can't figure out.
How do I get this to work?

Answer 1

Ok, figured it out. I got rid of the computed property and went back to how I started. Just had a syntax error. Here is code that works.
<template
v-for="(bool, i) in booleans"
v-slot:[`item.${bool.name}`]="{ item }"
>
<v-icon :key="i" class="mr-3">
{{ item[bool.name] ? bool.iconTrue : bool.iconFalse }}</v-icon
>
</template>