Vue click prevent triggers

Question

I'm making a menu, with some accordion links, that when clicked, will show more options. The problem now, is that when I click one, they all trigger.

I need to trigger only the element that has been clicked.

I've tried @click.prevent, stop, self etc and not working. Maybe I'm missing something??

<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>

I'm using foo as boolean type.

Any idea??

Thanks you!!

tony19 · Accepted Answer · 2021-06-01 15:37:13Z

1

The problem is all the <li>s are bound to the same foo variable, so editing one reference affects all others.

The solution is to create separate variables for each <li>. For example, you could change foo to be an array, and bind each individually:

<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>

answered Jun 1, 2021 at 15:37

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue click prevent triggers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related