uniapp中循环绑定的click参数在小程序中丢失是什么原因？

在uniapp开发中，使用v-for循环绑定@click事件时，发现在小程序环境中传递的参数会丢失。例如：

<view v-for="(item, index) in list" :key="index" [@click](/user/click)="handleClick(item)">
  {{item.name}}
</view>

在H5端能正常获取到item参数，但编译到微信小程序时点击事件获取到的参数变成了undefined。请问这是什么原因导致的？该如何解决？

2 回复

可能是事件参数传递问题。在循环中使用@click时，建议通过data-属性传递参数，例如：

<view v-for="(item, index) in list" :key="index" @click="handleClick" :data-index="index">

然后在方法中通过event.currentTarget.dataset.index获取参数。


在UniApp中，循环绑定click事件时参数丢失，通常是由于小程序平台的渲染机制导致的。以下是主要原因和解决方案：

原因

  1. 事件对象限制：小程序中，事件处理函数默认接收事件对象，自定义参数可能被覆盖或丢失。
  2. 数据绑定时机：循环渲染时，事件处理函数在数据更新后可能未正确绑定参数。

解决方案

使用data-*属性传递参数，并在事件处理函数中通过event.currentTarget.dataset获取。

示例代码：

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" @click="handleClick" :data-item="item" :data-index="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '项目1' },
        { name: '项目2' }
      ]
    };
  },
  methods: {
    handleClick(event) {
      const item = event.currentTarget.dataset.item;
      const index = event.currentTarget.dataset.index;
      console.log('点击项:', item, '索引:', index);
    }
  }
};
</script>

说明

  • 通过data-item和data-index绑定参数，避免直接传递。
  • 在handleClick方法中，使用event.currentTarget.dataset读取参数。

这种方法确保参数在小程序中正确传递，避免丢失问题。

回到顶部