Setting the base url inside a anchor tag href in VueJS

In my Vue JS application I have a component to share a link on twitter and Facebook. Following is my code for twitter share option

<a href="http://twitter.com/share?text=Verbatim&url=https://test.sample.site/&hashtags=hashtag1,hashtag2,hashtag3">

I have two environments. Test and Live. Because of that when ever I change the environment I have to change the url parameter of he anchor tag manually. But without seting that manually, I’m trying to put he base url inside that anchor.

Eg: Instead of using https://test.sample.site how can I set the base url?

Answer

You can use window.location.origin.

in data property:

data: () => {
    return {
      baseUrl: window.location.origin,
    };
},

And in template section:

<a :href="`http://twitter.com/share?text=Verbatim&url=${baseUrl}&hashtags=hashtag1,hashtag2,hashtag3`"
>link</a>