'v-bind on link href does not work but only in production (Nuxt static site)
I am trying to bind a generated link to a button. The link is generated based on parameters passed in the URL. The code roughly looks like this:
<a :href="generated_link">
<button
type="button"
class="button"
>
Go to Link
</button>
</a>
The code to generate the link:
mounted() {
let route_variables = {
cmpid: this.$route.query.cmpid,
utm_source: this.$route.query.utm_source,
};
if (route_variables["cmpid"] === undefined) {
console.log(route_variables["cmpid"]);
route_variables["cmpid"] = "2983928372983";
}
var newLink = "https://www.website/?";
for (const property in route_variables) {
if (route_variables[property] != undefined) {
newLink += property + "=" + route_variables[property] + "&";
}
}
this.generated_link = newLink;
},
In development, the link is populated properly. When I add a cmpid variable to the URL then it is appended to the button link as expected. In deployment, however, the cmpid variable is always set to the value I have set as the default when there is no variable in the URL, even when I add it to the URL. I think that this is because it is being evaluated in build time. If I just use ((generated_link}} to print the link on the page it works fine. I have tried a bunch of different workarounds to try to get the a tag to render client-side to no avail. Any help would be greatly appreciated!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|