时间戳

首页 > 解决方案 > 如何为每个元素添加唯一的事件侦听器

javascript - 如何为每个元素添加唯一的事件侦听器

问题描述

我正在做一个 laravel 项目。@foreach我必须使用刀片指令迭代资源，如下所示：

@foreach($users as $user)
    <p @click="toggleClick">{{ $user->name }}</p>
    <p v-if="clicked">Lorem ipsum</p>
@endforeach

您可能已经注意到这种方法的问题。问题是如果有五个用户，toggleClick听众将被附加到每个段落。因此，如果我单击“一个”用户，隐藏的 Lorem ipsum 段落将立即显示为“所有”段落。这是一个例子：

约翰·多伊

Lorem ipsum

简·多伊（点击）

Lorem ipsum

吉米·多伊

Lorem ipsum

但我想要的是这样的：

约翰·多伊

简·多伊（点击）

Lorem ipsum

吉米·多伊

我怎样才能做到这一点？

标签： javascriptlaravelvue.js

解决方案

如果您希望每个段落独立运行，那么您必须有独立的听众。
例如，您可以在循环中添加索引以及段落编号toggleClick(event, i)在哪里。 在您的 HTML 中，只需使用布尔字段显示可见段落；）i

推荐阅读