为 href 添加一个 function 到 v-for VUE.js 循环

Question

我需要使用 VUE.js 在 v-for 循环中添加一个链接，项目的数量可以是 1 - 5。但是； href 需要是 web api 调用的返回值，以了解 url。 我有

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

但我得到一个错误：

'v-bind' 指令需要一个属性值。

load_NIH_Reporter 需要调用 WEB API 来传递一个 ID 以获得正确的 URL。 还是有更好的方法来做到这一点？ 如果页面上的唯一链接变为活动状态并仅在单击后才调用 WEB API，我不会有问题。

Answer 1

将值绑定到属性的正确语法是：

:attr="value"

并且不建议将方法用作值，特别是如果它们进行异步调用，则需要在某些生命周期或观察者中向 object 添加属性。

或者您可以将该方法绑定为事件处理程序：

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