add a function to a v-for VUE.js loop for the href

September 6, 2022

I need to add a link inside a v-for loop using VUE.js, the number of items can be from 1 – 5. However; the href needs to be a returned value form a web api call to know the url. I have

                   <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>

But I get an error of:

‘v-bind’ directives require an attribute value.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel

The load_NIH_Reporter needs to call the WEB API to pass in an ID to get the proper URL. Or is there a better way to do this? I wouldn’t have a problem if the only link on the page became active and called the WEB API only after it was clicked.

>Solution :

The right syntax to bind a value to an attribute is :

:attr="value"

and it’s not recommended to use methods as value especially if they do async calls, you need to add property to the object in some lifecycle or in watcher.

or you could bind the method as event handler :

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