如何在输入时禁用折叠 v-b-toggle 事件？答案

【问题标题】：How to disable collapse v-b-toggle event on input?如何在输入时禁用折叠 v-b-toggle 事件？
【发布时间】：2021-03-13 07:43:39
【问题描述】：

所以我有一个 v-b-toggle，它可以切换其他 div。一切正常，但是在 v-b-toggle 所在的 div 中，我有输入复选框。问题是，如果您单击此复选框，切换也可以工作（打开 div 然后立即关闭它）。是否有可能在此特定输入上禁用切换事件？
代码： <div class="box-header" v-b-toggle="$id(`collapse-${i}`)"><input type="checkbox"></div>

【问题讨论】：

标签： vue.js bootstrap-4 toggle collapse bootstrap-vue

【解决方案1】：

您可以将@click.stop 添加到您的输入中，这将停止传播点击事件。

stop 修饰符是stopPropagation 的助手

您还可以在vue docs 上阅读有关 vue event modifiers 的更多信息。

new Vue({
  el: '#app'
})

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />

<script src="//cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="app">
  <div v-b-toggle.my-collapse>
   Some text
   <input type="checkbox" @click.stop/>
  </div>

  <b-collapse id="my-collapse">
    Hello<br />
    World
  </b-collapse>
</div>

【讨论】：