vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效

在Vue中，可以通过以下两种方式实现让v-for循环出来的列表里面的列表click事件只对当前列表有效：

1. 使用匿名函数

在模板中，可以使用匿名函数来绑定click事件，然后在函数内部使用event.stopPropagation()方法阻止事件冒泡，从而实现只对当前列表有效的效果，例如：

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.name }}
    <ul @click="() => handleClick(index, $event)">
      <li v-for="(subItem, subIndex) in item.subItems" :key="subIndex">{{ subItem.name }}</li>
    </ul>
  </li>
</ul>

...

methods: {
  handleClick(index, event) {
    event.stopPropagation();
    console.log(`点击了第 ${index} 个列表`);
  }
}

2. 使用自定义事件

可以在子组件中定义一个自定义事件，并在父组件中绑定该事件，然后在子组件中触发事件并传递参数，从而实现只对当前列表有效的效果，例如：

// 子组件
<template>
  <li>{{ item.name }}</li>
</template>

...

methods: {
  handleClick() {
    this.$emit('click', this.item);
  }
}

// 父组件
<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ item.name }}
    <ul>
      <child-component v-for="(subItem, subIndex) in item.subItems" :key="subIndex" :item="subItem" @click="handleClick"></child-component>
    </ul>
  </li>
</ul>

...

methods: {
  handleClick(subItem) {
    console.log(`点击了 ${subItem.name} 列表`);
  }
}

以上两种方式都可以实现只对当前列表有效的效果，具体使用哪种方式可以根据实际需求来选择。