How to make the value of item-value a router link in Vuetify?

Question

I am trying to add a router link for each element in this autocomplete component, but the links are not being added. How do I make the items in the list clickable corresponding to a URL with their id ? I want the value of item-value to be a router link as below:

          <router-link :to="'employee/'+ item.ID">{{item.ID}}</router-link>

here is the autocompelete

 <v-autocomplete
            :items="employees"
            item-text="ID"
            item-value="ID"
            data-vv-name="search"
            append-icon="mdi-magnify"
            placeholder="Search for an employee"
            outlined
            id="search"
          >
          </v-autocomplete>

is changing the value the right approach to do this?

You can use either item slot or selection slot depending on your requirements. — IVO GELOV

Vallemar Vallemar · Accepted Answer · 2020-08-28T12:36:46

You can add the slot item to modify the item in the list.

Try this:

 <v-select
        :items="employees"
        item-text="ID"
        item-value="ID"
        data-vv-name="search"
        append-icon="mdi-magnify"
        placeholder="Search for an employee"
        outlined
        id="search" 
  >
    <template v-slot:item={item}>
      <router-link :to="'employee/'+ item.ID">{{item.Name}}</router-link>
    </template>
  </v-select>

How to make the value of item-value a router link in Vuetify?

1 Answers