uniapp v-for循环中,原来的子列表中有一个点击事件,当我点击父列表的点击事件时,子列表中的点击事件失效。点击子列表点击事件时,父列表的点击事件失效
时间: 2024-04-29 17:02:32 浏览: 76
这种情况可能是因为子列表的点击事件被父列表的点击事件所覆盖。可以尝试在子列表的点击事件中使用 `event.stopPropagation()` 方法来阻止事件冒泡,使其不再被父列表的点击事件所捕获。例如:
```
<template>
<div v-for="(item, index) in list" :key="index">
<div @click="handleParentClick">{{ item.title }}</div>
<ul>
<li v-for="(subItem, subIndex) in item.subList" :key="subIndex">
<div @click.stop="handleChildClick">{{ subItem.title }}</div>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
title: '父列表1',
subList: [
{ title: '子列表1' },
{ title: '子列表2' }
]
},
{
title: '父列表2',
subList: [
{ title: '子列表3' },
{ title: '子列表4' }
]
}
]
}
},
methods: {
handleParentClick() {
console.log('点击了父列表');
},
handleChildClick() {
console.log('点击了子列表');
}
}
}
</script>
```
在子列表的点击事件中使用了 `@click.stop`,这样就可以阻止事件冒泡,避免被父列表的点击事件所覆盖。
阅读全文