Using Vue JS to dynamically add a variable to the end of a URL

Question

Using Vue JS to dynamically add a variable to the end of a URL

Using the v-for method on my page, I am displaying a series of numbers.

Each number is outputted using v-for and I need to attach them to a link structure like this:

<a href="/order/1234">1234</a>
<a href="/order/122356">122356</a>
<a href="/order/124">124</a>
<a href="/order/12312">12312</a>

Currently, I am getting:

<a href="/order/{{ order.number }}">1234</a>
<a href="/order/{{ order.number }}">122356</a>
<a href="/order/{{ order.number }}">124</a>
<a href="/order/{{ order.number }}">12312</a>

I'm confused about what's going wrong. Can someone point out my mistake?

javascript vue.js

Answer 1

Answer №1

To handle this scenario, it is recommended to utilize the v-bind directive as shown below:

<a v-bind:href="'/order/' + order.number">1234</a>
<a v-bind:href="'/order/' + order.number">122356</a>
<a v-bind:href="'/order/' + order.number">124</a>
<a v-bind:href="'/order/' + order.number">12312</a>

In a similar manner, you can achieve the same result with the concise syntax:

<a :href="'/order/' + order.number">1234</a>
<a :href="'/order/' + order.number">122356</a>
<a :href="'/order/' + order.number">124</a>
<a :href="'/order/' + order.number">12312</a>

Answer 2

To handle this scenario, it is recommended to utilize the v-bind directive as shown below:

<a v-bind:href="'/order/' + order.number">1234</a>
<a v-bind:href="'/order/' + order.number">122356</a>
<a v-bind:href="'/order/' + order.number">124</a>
<a v-bind:href="'/order/' + order.number">12312</a>

In a similar manner, you can achieve the same result with the concise syntax:

<a :href="'/order/' + order.number">1234</a>
<a :href="'/order/' + order.number">122356</a>
<a :href="'/order/' + order.number">124</a>
<a :href="'/order/' + order.number">12312</a>

Using Vue JS to dynamically add a variable to the end of a URL

Answer №1

Similar questions

Problems encountered with the functionality of Sidr when using an AngularJS button with ng

Having issues with setting up nodejs on kali linux

JQuery is used to create a pop-up box

Monitor the scrolling progress across four separate HTML pages without the percentage decreasing when scrolling back up

Tips for deleting a button from a DataTable file upload feature

A guide on adjusting a function to pause execution until a line is complete

AJAX's PUT method encountering issues in Google Chrome

Retaining the data retrieved from a successful $.ajax call's done() function

Adding an object to an ArrayList: A step-by-step guide

Automatically adjust zoom on focused object within a D3 force layout

Obtaining a key from a Firebase query using JavaScript

Codepen is experiencing difficulties loading textures in three.js

Preventing flexbox containers from being affected by overflow elements

Implementing html5mode in Express.js and Angular.js for cleaner URLs

Updating content with Ajax in Laravel

Is it possible to use ng-click to pass multiple arrays at once?

Exploring the usage of multidimensional arrays in React components

What steps can you take to prevent a potential crash from occurring when an unauthorized user attempts to access a page without logging in?

Get the desired text following the second <br> tag using jQuery

The method for viewing stack traces in Express JS server logs