Vue V-Slot / V-Chip with @Click URL

Dashboard
1

I am trying to modify a table entry in one of my Dashboard 2 tables that uses V-Slots to use the url value on @Click to open a new browser window with the url.

image
image395Ă—172 5.73 KB

Here is the template:

        <template v-slot:item.servicename="{ item }" v-slot:item.websiteurl="{ item }">
          <v-chip :color="getChipColor(item)"  @click="navigateToRoute(item.websiteurl)">
            {{ item.servicename }}
          </v-chip>
        </template>

Here is navigateToRoute method:

navigateToRoute() {
       this.$router.push(item.websiteurl);    
    },

When I click on the V-Chip object the icon indicates it was clicked but the url does not open. I appreciate your advice.

Regards

2

I'm no expert :sweat_smile:

this.$router doesn't handle external links.

You push item.websiteurl, but item isn't defined in the parameters of your navigateToRoute function. If item comes from data, then it is this.item.

3

You could try something like:

methods: {
  navigateToRoute(url) {
    if (url.startsWith('http://') || url.startsWith('https://')) {
      // It's an external URL
      window.location.href = url;
    } else {
      // It's an internal route
      this.$router.push(url);
    }
  }
}
1 Like