Make v-data-table rows opens in new tab (vuetify)

Question

I'm currently using vuetify and I need to make each row act as a tag and make sure it's opens in new tab.

My table looks like this:

<v-data-table
        :headers="headers"
        :items="campaigns"
        calculate-widths
        :loading="loading"
        :search="search"
        :items-per-page="15"
        @click:row="showCampaignReport"
      >
</v-data-table>

I'm using @click:row="showCampaignReport" now and it works fine but the problem is that there is no open link in new tab in browser context menu...

showCampaignReport(value) {
    this.$router.push({ path: `/campaigns/${value.hash}` });
},

If you need the `open link in new tab` to appear in the context menu - you must wrap the content of each table cell inside A tags. — IVO GELOV, Jun 01 '21 at 13:12
@IVOGELOV yeah I know that I should wrap it inside a tag. but I don't know how can I do it in an efficient way — Hasan Parasteh, Jun 01 '21 at 13:22
@scar-2018 I edited my question and added the details of `showCampaignReport`. — Hasan Parasteh, Jun 01 '21 at 13:23

score 1 · Accepted Answer · answered Jun 01 '21 at 14:21

1

Sorry for late reply. The question was already posted and you can find in here

answered Jun 01 '21 at 14:21

scar-2018

510
2
9

Make v-data-table rows opens in new tab (vuetify)

1 Answers1