Reputation: 1093
I am using the VueTableLite
from vue3-table-lite/ts
package and am running into an issue where I am unable to get the below table to update when using a v-slot
<script setup lang="ts">
import vueTable from '@/components/plugins/VueTable.vue' // This file is where I use the plugin
import { onMounted, reactive } from 'vue'
onMounted(async () => {
doSearch(0, 10, 'id', 'asc')
})
const doSearch = (offset, limit, order, sort) => {
table.isLoading = true
...
}
// Table config
const table = reactive({
isLoading: false,
columns: [
{
label: 'ID',
field: 'id',
width: '10%',
sortable: true,
isKey: true,
},
...
{
label: 'Active',
field: 'active',
width: '15%',
sortable: true,
},
{
label: 'Actions',
field: 'actions',
width: '15%',
sortable: false,
},
],
rows: [],
totalRecordCount: 0,
sortable: {
order: 'id',
sort: 'asc',
},
})
</script>
Now for the template
<template>
<vue-table class="vue-table"
:has-checkbox="false"
:isSlotMode="true"
:is-loading="table.isLoading"
:columns="table.columns"
:rows="table.rows"
:total="table.totalRecordCount"
:sortable="table.sortable"
@is-finished="table.isLoading = false"
>
<template v-slot:active="data">
{{ data.value.active ? 'Yes' : 'No' }}
</template>
</vue-table>
</template>
I was expecting the "active" column in the table to display the work "Yes" when true
and "No" when false. Instead it dispays the actual true/false value.
Example row
{
"id": "05c46aa8-5a07-4f98-a0b0-bafb84f69703",
"email": "[email protected]",
"firstName": "John",
"lastLogin": "2024-09-20T11:48:30.611Z",
"lastName": "Doe",
"role": "ADMIN",
"createdAt": "2024-08-13T02:49:36.220Z",
"active": true
}
VueTable.vue
<script>
import VueTableLite from 'vue3-table-lite/ts'
export default {
components: {
VueTableLite,
}
}
</script>
<template>
<vue-table-lite />
</template>
Upvotes: 0
Views: 56