I'm attempting to create a clickable row in a datatable that functions as a link. Placing a standard <nuxt-link> within a <td> works fine, but wrapping the entire <tr> disrupts the table layout.
Next, I tried using @click with a method, which resulted in a 404 error: TypeError: Cannot read property 'nuxtLink' of undefined
<tbody class="bg-white">
<tr
v-for="(productCard) in productList"
:key="productCard.acquisitionCost"
:class="[
'hover:bg-gray-50',
'transition',
'ease-in-out',
'duration-150',
'cursor-pointer'
]"
@click="goToProduct()"
>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-gray-500"
>
{{ productCard.oVariant }}
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
>
<div class="text-sm leading-5 text-gray-900">{{ productCard.gear }}</div>
<div class="text-sm leading-5 text-gray-500">{{ productCard.motor }} hk</div>
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
>
<div class="text-sm leading-5 text-gray-900">{{ productCard.fuelType }}</div>
<div class="text-sm leading-5 text-gray-500">{{ productCard.economy }} km/l</div>
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
>
Tom
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
>
Tom
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200 text-sm leading-5 text-cool-gray-700"
>
DKK <b>{{ productCard.monthlyPrice }},</b>- mdl.
</td>
<td
class="px-6 py-4 whitespace-no-wrap border-b border-gray-200"
>
<nuxt-link
:to="productCard.nuxtLink"
>
<svg class="h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
</svg>
</nuxt-link>
</td>
</tr>
</tbody>
methods: {
goToProduct: function () {
location.href = this.productCard.nuxtLink
}
}
Any suggestions on how I can make the entire row act as a link?