CODEWITHSUNDEEP
javascripthtmlvue.jsvuejs2vue-component
leansti
leansti

Reputation: 11

How to send parameters inside Vue's v-for to a function?

How to pass as a parameter {{ item.id }} to my function productos.mostrarModal() in a v-for loop in vue.js?

<div v-for="item of articulos">
    <a href="#" onclick="productos.mostrarModal()"  >
        <h2>{{item.name}}</h2>
        <i><h5>{{item.marca}}</h5></i>
        <img :src="item.picture" />
    </a>
</div>

Which other tag could I use instead or with the div? Thanks.

Upvotes: 1

Views: 3477

Answers (2)

MarcRo
MarcRo

Reputation: 2473

You need to use the Vue eventHandler: v-bind:click="handler", or the short version @click="handler". There are bindings for all events as far as I know.

For completeness: a v-for loop requires a unique key attribute, which can be the index for example.

And if you want to acces the event, as well as custom parameters in your eventHandler, you can pass the $event parameter as first argument.

e.g.:

<div v-for="(item, index) of articulos" :key="index">
    <a href="#" @click="productos.mostrarModal($event, item.id)"  >
        <h2>{{item.name}}</h2>
        <i><h5>{{item.marca}}</h5></i>
        <img :src="item.picture" />
    </a>
</div>

Upvotes: 2

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

replace onclick by @click event and pass the parameter to its handler like productos.mostrarModal(item.id) :

<div v-for="item of articulos">
    <a href="#" @click="productos.mostrarModal(item.id)"  >
        <h2>{{item.name}}</h2>
        <i><h5>{{item.marca}}</h5></i>
        <img :src="item.picture" />
    </a>
</div>

Upvotes: 2

Related Questions