如何为Laravel Blade循环元素添加独立的点击事件监听？

嘿，这个问题很典型！你现在遇到的核心问题是：所有用户的显示状态都绑定了同一个全局的clicked变量，所以只要触发点击事件，所有v-if="clicked"的段落都会同时显示/隐藏。要实现点击哪个用户就只显示该用户对应的段落，我们需要给每个用户单独维护一个独立的状态。

下面给你两种实用的解决方案：

方案一：用对象存储每个用户的点击状态 #

这种方法适合用户数据是从后端直接渲染的场景，不需要修改原用户数据结构：

修改后的Blade模板代码 #

@foreach($users as $user)
    <!-- 点击时传递用户ID到方法 -->
    <p @click="toggleClick({{ $user->id }})">{{ $user->name }}</p>
    <!-- 根据当前用户ID的状态判断是否显示 -->
    <p v-if="clickedUsers[{{ $user->id }}]">Lorem ipsum</p>
@endforeach

对应的Vue逻辑 #

export default {
    data() {
        return {
            // 用对象存储每个用户的点击状态，键为用户ID，值为布尔值
            clickedUsers: {}
        }
    },
    methods: {
        toggleClick(userId) {
            // 切换对应用户的状态：如果未定义则设为true，否则取反
            this.clickedUsers[userId] = !this.clickedUsers[userId];
        }
    }
}

方案二：给每个用户对象添加状态属性 #

如果你的用户数据已经在Vue组件的data中管理（比如通过axios请求获取），可以直接给每个用户添加一个isClicked属性：

修改后的Blade模板代码 #

@foreach($users as $user)
    <!-- 传递循环索引到方法 -->
    <p @click="toggleClick({{ $loop->index }})">{{ $user->name }}</p>
    <!-- 根据当前用户的isClicked属性判断显示 -->
    <p v-if="users[{{ $loop->index }}].isClicked">Lorem ipsum</p>
@endforeach

对应的Vue逻辑 #

export default {
    data() {
        return {
            // 假设users是从后端获取的用户列表
            users: @json($users)
        }
    },
    mounted() {
        // 初始化每个用户的点击状态为false
        this.users.forEach(user => {
            user.isClicked = false;
        });
    },
    methods: {
        toggleClick(index) {
            // 切换对应索引用户的状态
            this.users[index].isClicked = !this.users[index].isClicked;
        }
    }
}

为什么原来的方法不行？ #

你之前用单个clicked布尔值控制所有段落，就像开了一个全局开关——只要开关打开，所有关联的元素都会响应。而我们需要的是每个用户一个独立的开关，这样点击不同的用户只会触发自己对应的开关状态变化。

内容的提问来源于stack exchange，提问作者Tanmay