vue 手风琴防止事件在点击时触发

Question

刚开始学Vue2

我用bootstrap手风琴

我希望能够在不触发 'collapse' 事件的情况下单击 'hello button'。

如何操作？

<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`"
                aria-expanded="true"
                :aria-controls="`collapseOne`"
        >
          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>

Answer 1

您必须确保您的 hello-button 没有嵌套在 accordion-button 中。只需将两个按钮放在一起即可。您可能需要调整 css 以正确定位它们。

<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`"
                aria-expanded="true"
                :aria-controls="`collapseOne`"
        >
          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>

vue 手风琴防止事件在点击时触发

vue accordion prevents events from firing on click

vuejs2

bootstrap-5