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

**URL:** https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662
**Category:** Dashboard
**Tags:** dashboard-2
**Created:** [14 August 2025 13:08 UTC](https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662 "2025-08-14T13:08:57Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Mick](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mick/32/80990_2.png) [@Mick](https://discourse.nodered.org/u/Mick)
#### Post date: [14 August 2025 13:08 UTC](https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662/1 "2025-08-14T13:08:57Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d131a3b947ea8ab248399fbf4de44558608a5a1.png)

Here is the template:

```auto
        <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:

```auto
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

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [14 August 2025 16:29 UTC](https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662/2 "2025-08-14T16:29:22Z")

</div>

I'm no expert 😅

`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`.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [14 August 2025 16:57 UTC](https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662/3 "2025-08-14T16:57:15Z")

</div>

> [@Mick](#):
>
> ```auto
> navigateToRoute() {
> this.$router.push(item.websiteurl);    
> },
> 
> ```

You could try something like:

```js
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);
    }
  }
}

```

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [28 August 2025 16:57 UTC](https://discourse.nodered.org/t/vue-v-slot-v-chip-with-click-url/98662/4 "2025-08-28T16:57:47Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.