Vue点击防止触发

Question

我正在制作一个带有一些手风琴链接的菜单，点击后会显示更多选项。现在的问题是，当我点击一个时，它们都会触发。

我只需要触发已单击的元素。

我尝试过@click.prevent、stop、self等，但都不起作用。也许我错过了什么？？

<li :aria-expanded="foo">
<button id="foo-1" @click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>
<li :aria-expanded="foo">
<button  id="foo-2" @click="foo = !foo" :aria-pressed="foo" :aria-expanded="foo" >
FOO
</button>
<ul v-show="foo">
<li> Accordion option </li>
</ul>
</li>

我使用foo作为布尔类型。

知道吗？？

谢谢！！

Answer 1

问题是所有的<li>都绑定到同一个foo变量，因此编辑一个引用会影响所有其他引用。

解决方案是为每个<li>创建单独的变量。例如，您可以将foo更改为一个数组，并单独绑定每个数组：

<template>
<li>
<button @click="foo[0] = !foo[0]">FOO</button>
</li>
<li>
<button @click="foo[1] = !foo[1]">FOO</button>
</li>
<template>
<script>
export default {
data() {
return {
foo: []
}
}
}
</script>