如何从vue js模板中将params传递给方法调用？

Question

So inside my template I have the following:

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

The problem is I am trying to create a href link with two variables, but I don't think I can do that in vue.js

I'm hoping there IS a way to do this and I just don't know about it, otherwise I can just write a method to create the link and call it like:

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

The question I have (if I have to go this route) is how do I pass two params into the method from this call above? I want to call with item.mongo_link and stage.name

Answer 1

I think you should change:

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

to

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

Answer 2

A bit cleaner way is using methods

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

Then in template

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