CODEWITHSUNDEEP
javascriptvue.jsvuejs2
parsecer
parsecer

Reputation: 5106

Vue: weird behavior of :to property on @click

I have this object:

Hashtag.vue:

<template>
  <router-link :to="getTo"
               custom v-slot="{ navigate }">
  <div role="link" @click="navigate">
    {{text}}</div>
  </router-link>
</template>

<script>
export default {
  props: {
    text: {
      type: String
    },
    date:  {
      type: String
    },
    link: {
      type: String,

    }
  },
  created()  {
    console.log("this link: " + this.link);
  },
  computed:  {
    getTo: function()  {
      console.log("text: " + this.text);
      console.log("link: " + "hashtag/" + this.text);
      return "hashtag/" + this.text;
    }
  }
}
</script>

And use it in HashtagsList.vue:

<template>
  <div>

    <Hashtag text="test1"/>
    <Hashtag text="test2"/>
    <Hashtag text="test3"/>
    <Hashtag text="test4"/>
    <Hashtag text="test5"/>

  </div>
</template>

However when I click a hashtag when located at

http://localhost:8080/hashtag/sometag

it goes to

http://localhost:8080/hashtag/hashtag/sometag

Instead of

http://localhost:8080/hashtag/sometag

How do I fix it?

http://localhost:8080/hashtag/test2

Upvotes: 0

Views: 47

Answers (1)

Zaffron
Zaffron

Reputation: 154

You can try using "/" in front of your route to make it absolute and vue will not concate that route.

"/hastag/" + this.text

Upvotes: 2

Related Questions