'PrimeVue-make a text in a cell of the table a router link

<script setup lang="ts">
import * as Vue from 'vue';
import { G, ROLES } from '@/G';
import * as DTO from '@/DTO';
import { FilterMatchMode, FilterOperator } from 'primevue/api'
import { ref, onMounted } from 'vue';
import { RouterLink } from 'vue-router';

const recs = Vue.ref<DTO.IWebPages[]>();

G.doAjaxAsync<DTO.IWebPages[]>('webpages/ForUserAtClient',null).then(o => {
if (o !== null)
recs.value = o;})

const filters = Vue.ref();
const clearFilter = () => {
initFilters();};
const initFilters = () => 
{filters.value = {'global'{value:'',matchMode:FilterMatchMode.CONTAINS },}};
initFilters()

</script>

<template>

<div class="grid">
<div class="col-12 lg:col-12 xl:col-12">
<div class="card mb-0">
<h3>Data Page Menu</h3>
</div>
<br />

<DataTable 

:value="recs" 
:paginator="true" class="p-datatable-gridlines"
:rows="15" dataKey=""
:rowHover="true"responsiveLayout="scroll"paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:alwaysShowPaginator="false"currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
v-model:filters="filters" filterDisplay="menu" :globalFilterFields="['company']">

<template #empty>
 No records
</template>

<Column field="company" header="Company" />
<Column field="dataType" header="Type" />
<Column field="screenText" header="Text" class="p-link" />

<template>

Above is my code which displays data in three columns. The last row screenText has text values for example NewAssignent. I want to make that text a router link to another page called NewAssignment. The tags and are PrimeVue tags. Wrappers over html table, row and column tags. If you see the third column I placed a class="p-link" but it makes the whole cell clickable. I want the text to be recognized as there are different pages and they should link to these values inside column cell. The other cell value is search so it will go to search page. The data coming from the API for the third column should be links to other pages.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source