add hyperlink in v-data-table Vuetify

Question

I've been slowly learning the joys of vue.js and Vuetify. I'm trying to get the emails and website as working links but just can't figure out how to do it.

I have my v-data-table

 <v-data-table :headers="headers" :items="companies" :search.sync="search" :items-per-page="5">

In my script I'm having first:

    data: () => ({
    headers: [
      { text: "Bedrijfsnaam", align: "start", value: "name" },
      { text: "Telefoon", value: "phone" },
      { text: "e-Mail", value: "email" },
      { text: "Website", value: "website" },
      { text: "Locatie", value: "location" },
      { text: "Actions", value: "actions", sortable: false }
    ],
    companies: [],
  }),

And finally

  methods: {
    initialize() {
      this.companies = [
        {
          name: "Lorem NV",
          phone: "+32 1 234 56 78",
          email: "[email protected]",
          website: "www.lorem.be",
          location: "Gent"
        },
      ];
    }

Answer 1

Welcome to Stack Overflow!

You need to implement a custom template for the row that has the link:

<v-data-table
  :headers="headers"
  :items="companies"
  :search.sync="search"
  :items-per-page="5"
>
  <template #item.phone="{ item }">
    <a target="_blank" :href="`tel:${item.phone}`">
      {{ item.phone }}
    </a>
  </template>
  <template #item.email="{ item }">
    <a target="_blank" :href="`mailto:${item.email}`">
      {{ item.email }}
    </a>
  </template>
  <template #item.website="{ item }">
    <a target="_blank" :href="item.website">
      {{ item.website }}
    </a>
  </template>
</v-data-table>

You can put whatever content inside of the <template> elements that you want, so, for example, if you had an id field for each company and you wanted to link the company name to the page within your website that has the details page about that company, you could do:

<v-data-table
  :headers="headers"
  :items="companies"
  :search.sync="search"
  :items-per-page="5"
>
  <template #item.name="{ item }">
    <router-link :to="{ name: 'company', params: { id: item.id } }">
      {{ item.name }}
    </router-link>
  </template>
</v-data-table>

You can put buttons, icons, or whatever you want inside of the template. Hope this helps!

Answer 2

You can use the item.<name> slot. For example, where website is the property name:

    <template #item.website="{ value }">
        <a :href="value">
          {{ value }}
        </a>
    </template>

OR email,

    <template #item.email="{ value }">
        <a :href="`mailto:${value}`">
          {{ value }}
        </a>
    </template>

This only needs to be used for the fields you want to customize.

Demo: https://codeply.com/p/CX3vXv6x6R