Implement a new functionality in a VUE.js loop using v-for for the href attribute

Question

Implement a new functionality in a VUE.js loop using v-for for the href attribute

Looking to incorporate a link within a v-for loop using VUE.js, where the number of items ranges from 1 to 5. The catch is that the href attribute must be populated by a web api call to determine the URL. Below is the code snippet:

                   <div v-for="objGrant in obj.GrantListData"  :key="objGrant.NCI_GrantList" >                      
                   <b>Grant Support:<a class="nav-link"
                   v-bind:href= {{load_NIH_Reporter(objGrant.GrantID)}} 
                   target='_blank'                                                 
                   aria-label= 'Support' >{{ objGrant.GrantID }}</a></b>                        
                   </div>

Encountering the following error:

'v-bind' directives require an attribute value.

load_NIH_Reporter function is meant to trigger a web API call by passing an ID to retrieve the appropriate URL. Is there a more efficient approach or should the web API only be called upon clicking the link?

javascript vue.js

Answer 1

Answer №1

To properly assign a value to an attribute, use the following syntax:

:attr="value"

Avoid using methods as values, especially if they involve asynchronous calls. Instead, add a property to the object during a specific lifecycle or in a watcher function.

Alternatively, you can bind the method as an event handler:

<a class="nav-link"  @click.prevent="load_NIH_Reporter(objGrant.GrantID)"                                               
                   aria-label= 'Support' >{{ objGrant.GrantID }}</a>

Answer 2

To properly assign a value to an attribute, use the following syntax:

:attr="value"

Avoid using methods as values, especially if they involve asynchronous calls. Instead, add a property to the object during a specific lifecycle or in a watcher function.

Alternatively, you can bind the method as an event handler:

<a class="nav-link"  @click.prevent="load_NIH_Reporter(objGrant.GrantID)"                                               
                   aria-label= 'Support' >{{ objGrant.GrantID }}</a>

Implement a new functionality in a VUE.js loop using v-for for the href attribute

Answer №1

Similar questions

What is the best way to set tab spacing within a textarea using ReactJS and Bootstrap?

React: executing function before fetch completes

To ensure that quotes are correctly handled in a string being passed to a JavaScript function within an `onclick`

Securing socket.io connection in a nodejs application

Adjust the pagination length within the jQuery DataTables plug-in

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Issue with JavaScript causing circles to form around a parent div

Exploring the Power of Observables in Angular 2: Focusing on Targeting an Array Nested Within

Issue with Vuelidate 2 and Vue 3 where the $model is failing to update

Trigger another mutation when the checkbox is unchecked

What is the best way to give this CSS button a "highlight" effect when it is clicked using either CSS3 or JavaScript?

React useState Error: Exceeded maximum re-renders. React enforces a limit on the number of renders to avoid getting stuck in an endless loop

Locate elements based on an array input in Mongoose

Occasionally, adding items to an array through pushing may not be successful

How to Use JQuery to Retrieve the Nearest TD Element's Text Content

Looking to update the background color of a div every 3 seconds?

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

When attempting to send an archiver file in NodeJS, the request may become unresponsive

Tips on utilizing AngularJS $http for transferring multipart/form-data

Codemirror - Advanced Auto-Suggest Feature with Separator