При щелчке вне некоторого элемента в vue без пакетов

Question

Мне интересно, как мы можем скрыть все показанные элементы при щелчке снаружи от этих элементов в vue:

<button @click="div1=true">Show div 1</button>
<div v-if="div1">DIV 1</div>

<button @click="div2=true">Show div 2</button>
<div v-if="div2">DIV 2</div>

Как я могу скрыть все div, кроме div 1, если я нажму на div 1 или скрою все div?при нажатии на какую-нибудь случайную часть страницы?Как vuetify справляется с этим?

Answer 1

• Легко обнаружить щелчок за пределами элемента, если вы знаете, как всплывающее событие работает в DOM.

• Скрытие других операций divочень хорошо, когда вы переводите состояние каждого div в состояние компонентов.

Вот пример: https://codesandbox.io/s/0480m38mww?fontsize=14&module=%2Fsrc%2FApp.vue

---

Подробнее о СобытиеБарботаж здесь - https://javascript.info/bubbling-and-capturing