Question

因此在我的模板中，我有以下内容：

          <template v-for="item in jobs">
            <tr>
                <td v-for="stage in item.stage_execs" :style="getStyle(stage.status.name)" :title="stage.exec_node.name" >
                  <b><a :href="[[ item.mongo_link ]]/[[stage.name]]">[[ stage.name ]]</a></b>
                  <br>
                  [[ stage.duration_millis | durationReadable  ]]
                  <br>
                  [[ stage.status.name ]]
                </td>
            </tr>
          </template>

问题是我试图用两个变量创建一个href链接，但我认为我不能在vue.js中做到这一点

我希望有一种方法可以做到这一点，但我对此一无所知，否则我可以编写一种方法来创建链接并按如下方式调用它：

<a :href="[[ generateMongoLink ]]">

我的问题（如果必须走这条路线）是如何从上面的调用中将两个参数传递给方法？我想打电话给item.mongo_link和stage.name

Answer 1

我认为您应该更改：

<a :href="[[ item.mongo_link ]]/[[stage.name]]">

到

<a :href="`${item.mongo_link}/${stage.name}`">

Answer 2

一种更简洁的方法是使用方法

methods: {
    generateMongoLink(item) {
     return item.mongo_link + '/' + stage.name"
   }
 }

然后进入模板

<a :href="generateMongoLink(item)">

如何在vue js模板中将参数传递给方法调用？

2 个答案: