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

Bill 0
Viewed 30

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.

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.

vue.js javascript
1 Answers

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>
Boussadjra Brahim0
Related