uni-app 多级嵌套循环判断，点击事件传参错误

在 uni-app 中，如果你遇到多级嵌套循环中的点击事件传参错误，通常是因为在事件处理函数中传递的参数不正确，或者在循环中绑定的参数有误。以下是一些常见的问题和解决方案：

1. 事件处理函数传参错误

在嵌套循环中，如果你直接在事件处理函数中传递参数，可能会导致参数传递错误。例如：

<template>
  <view v-for="(item, index) in list" :key="index">
    <view v-for="(subItem, subIndex) in item.subList" :key="subIndex">
      <button @click="handleClick(item, subItem)">点击</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { subList: ['A', 'B'] },
        { subList: ['C', 'D'] }
      ]
    };
  },
  methods: {
    handleClick(item, subItem) {
      console.log(item, subItem);
    }
  }
};
</script>

在这个例子中，handleClick 方法会接收到 item 和 subItem 两个参数。如果你发现参数传递错误，可能是因为在循环中绑定的参数有误。

2. 使用闭包传递参数

如果你需要在事件处理函数中传递更多的参数，或者需要动态传递参数，可以使用闭包来确保参数传递正确：

<template>
  <view v-for="(item, index) in list" :key="index">
    <view v-for="(subItem, subIndex) in item.subList" :key="subIndex">
      <button @click="handleClick(item, subItem, index, subIndex)">点击</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { subList: ['A', 'B'] },
        { subList: ['C', 'D'] }
      ]
    };
  },
  methods: {
    handleClick(item, subItem, index, subIndex) {
      console.log(item, subItem, index, subIndex);
    }
  }
};
</script>

在这个例子中，handleClick 方法会接收到 item、subItem、index 和 subIndex 四个参数。这样可以确保在嵌套循环中传递的参数是正确的。

3. 使用 data- 属性传递参数

另一种常见的方式是使用 data- 属性来传递参数，然后在事件处理函数中通过 event.currentTarget.dataset 来获取参数：

<template>
  <view v-for="(item, index) in list" :key="index">
    <view v-for="(subItem, subIndex) in item.subList" :key="subIndex">
      <button :data-item="JSON.stringify(item)" :data-sub-item="subItem" @click="handleClick">点击</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { subList: ['A', 'B'] },
        { subList: ['C', 'D'] }
      ]
    };
  },
  methods: {
    handleClick(event) {
      const item = JSON.parse(event.currentTarget.dataset.item);
      const subItem = event.currentTarget.dataset.subItem;
      console.log(item, subItem);
    }
  }
};
</script>

在这个例子中，item 和 subItem 通过 data- 属性传递，然后在 handleClick 方法中通过 event.currentTarget.dataset 获取。这种方式可以避免在嵌套循环中直接传递参数时可能出现的错误。

4. 确保 key 的唯一性

在嵌套循环中，确保每个元素的 key 是唯一的，这样可以避免 Vue 在更新 DOM 时出现错误。例如：

<template>
  <view v-for="(item, index) in list" :key="index">
    <view v-for="(subItem, subIndex) in item.subList" :key="`${index}-${subIndex}`">
      <button @click="handleClick(item, subItem)">点击</button>
    </view>
  </view>
</template>

在这个例子中，key 使用了 index 和 subIndex 的组合，确保每个子元素的 key 是唯一的。

5. 检查事件冒泡

如果你在嵌套循环中使用了事件冒泡，可能会导致事件处理函数被多次触发。你可以使用 event.stopPropagation() 来阻止事件冒泡：

<template>
  <view v-for="(item, index) in list" :key="index">
    <view v-for="(subItem, subIndex) in item.subList" :key="subIndex">
      <button @click="handleClick(item, subItem, $event)">点击</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { subList: ['A', 'B'] },
        { subList: ['C', 'D'] }
      ]
    };
  },
  methods: {
    handleClick(item, subItem, event) {
      event.stopPropagation();
      console.log(item, subItem);
    }
  }
};
</script>