Question

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

<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？谢谢。

Answer 1

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

Answer 2

您需要使用Vue eventHandler：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>

如何将Vue的v-for中的参数发送给函数？

2 个答案: