如何将 Vue 的 v-for 中的参数发送到函数？答案

【问题标题】：How to send parameters inside Vue's v-for to a function?如何将 Vue 的 v-for 中的参数发送到函数？
【发布时间】：2019-12-29 13:43:20
【问题描述】：

如何在 vue.js 的 v-for 循环中将 {{ item.id }} 作为参数传递给我的函数 productos.mostrarModal()？

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

我可以使用哪个其他标签来代替或与 div 一起使用？谢谢。

【问题讨论】：

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

您需要使用 Vue 事件处理程序：v-bind:click="handler"，或短版本@click="handler"。据我所知，所有事件都有绑定。

为了完整性：v-for 循环需要唯一的 key 属性，例如可以是 index。

如果您想访问event 以及eventHandler 中的自定义参数，您可以将$event 参数作为第一个参数传递。

例如：

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

【讨论】：

【解决方案2】：

将onclick 替换为@click 事件并将参数传递给其处理程序，如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>

【讨论】：