AnalysisResultDataTable.vue

<script setup lang="ts">
import { useWikiUrl } from '~/composables/useWikiUrl';
interface Props {
    items: any[]
    headers: Object[]
}

const props = defineProps<Props>()
const search = ref('')
const itemsPerPage = ref(25);


const computedItems = computed(() => {
    if (props.items?.length > 0) {
        return props.items.map((item) => {
            if (item?.type) {
                console.log(item.type)
                const { wikiUrl } = useWikiUrl(`/defense-systems/${item.type.toLowerCase()}/`)
                console.log(wikiUrl.value)
                return {
                    ...item,
                    href: wikiUrl.value
                }
            }
            else { return { ...item } }
        })
    } else { return [] }
})

// function getModelName(modelFqn: string) {
//     console.log(modelFqn)
//     // console.log(modelFqn.split("/").slice(-1).toLowerCase())
//     return modelFqn.split("/").slice(-1)[0].toLowerCase()
// }

</script>
<template>
    <v-card v-if="items" class="mt-5" flat color="transparent">
        <v-card-title>
            <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line
                hide-details></v-text-field></v-card-title>
        <v-card-text>
            <v-data-table v-model:items-per-page="itemsPerPage" :headers="headers" :items="computedItems" item-value="name"
                :search="search" class="elevation-1">

                <template #[`item.type`]="{ item }">
                    <v-chip :href="item?.raw.href ? item.raw.href : null" target="_blank">
                        {{ item.columns.type }}
                    </v-chip>
                </template>

            </v-data-table>


        </v-card-text>
    </v-card>
</template>