joshk132
joshk132

Reputation: 1093

Vue lite table not displaying slot

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

Answers (0)

Related Questions