Linking A Row In A Table To A Url

I am working on a vue component that implements vue-tables-2. I have a working example here. What I am trying to do is link the edit href url to the entire row as opposed to only t

Solution 1:

The table component emits a row-click event that you can listen to. It gives you the row that was clicked. I suggest, instead of trying to use a link, you listen for the event and navigate where you want.

Here is the updated template.

<v-client-table :data="tableData":columns="columns"@row-click="onRowClick">

And in the method:

onRowClick(event){
  window.location.href = `/edit/hello-${event.row.id}`
}

Example.