CODEWITHSUNDEEP
vuejs2bootstrap-5
dudulu
dudulu

Reputation: 812

vue accordion prevents events from firing on click

I just started learning Vue2.

I use bootstrap accordion.

I want to be able to click the 'hello button' without triggering the 'collapse' event.

How to do this?

<template>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item" v-for="i in 3" :key="i">
      <h2 class="accordion-header" :id="`headingOne${i}`">
        <button class="accordion-button"
                type="button" data-bs-toggle="collapse"
                :data-bs-target="`#collapseOne${1}`"
                aria-expanded="true"
                :aria-controls="`collapseOne${1}`"
        >
          Accordion Item #{{ i }}
          <button class="btn-primary" @click=test>hello button</button>
        </button>
      </h2>
      <div :id="`collapseOne${i}`" class="accordion-collapse show"
           :aria-labelledby="`headingOne${i}`">
        <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Learn',
  methods: {
    test () {
      console.log('hello')
    }
  }
}
</script>

Upvotes: 0

Views: 445

Answers (1)

EduDev
EduDev

Reputation: 334

You have to make sure that your hello-button is not nested inside the accordion-button. Just put both buttons right next to eachother. You might have to adjust the css to position them properly.

<template>
  <div class="accordion" id="accordionExample">
    <div class="accordion-item" v-for="i in 3" :key="i">
      <h2 class="accordion-header" :id="`headingOne${i}`">
        <button class="accordion-button"
                type="button" data-bs-toggle="collapse"
                :data-bs-target="`#collapseOne${1}`"
                aria-expanded="true"
                :aria-controls="`collapseOne${1}`"
        >
          Accordion Item #{{ i }}
        </button>
        <button class="btn-primary" @click=test>hello button</button>
      </h2>
      <div :id="`collapseOne${i}`" class="accordion-collapse show"
           :aria-labelledby="`headingOne${i}`">
        <div class="accordion-body">
          <strong>This is the first item's accordion body.</strong>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Learn',
  methods: {
    test () {
      console.log('hello')
    }
  }
}
</script>

Upvotes: 1

Related Questions