Блог

Главная - Вопросы по программированию - Как отключить событие collapse v-b-toggle при вводе?

Как отключить событие collapse v-b-toggle при вводе?

#vue.js #bootstrap-4 #toggle #collapse #bootstrap-vue

#vue.js #bootstrap-4 #переключить #коллапс #bootstrap-vue

Вопрос:

Итак, у меня есть v-b-toggle, который переключает другие div. Все работает нормально, но в div, где находится v-b-toggle, у меня есть флажок ввода. Проблема в том, что если вы нажмете на этот флажок, переключение также будет работать (откройте div, а затем мгновенно закройте его). Есть ли какая-либо возможность отключить событие переключения на этом конкретном входе?
код: <div class="box-header" v-b-toggle="$id(`collapse-${i}`)"><input type="checkbox"></div>

Ответ №1:

Вы можете добавить @click.stop к своему вводу данные, которые остановят распространение событий щелчка.

stop Модификатор является вспомогательным средством для остановки распространения

Вы также можете прочитать больше о event modifiers vue в документах vue.

 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>

Метки: