Как использовать :key в пользовательской директиве?

Question

[Goodie128]

Добрый день. Хочу написать директиву, по которой при клике вне элемента закрывается сам элемент (фильтр). Но суть в том, что у меня этих фильтров несколько (v-for), и при написании кода ниже, директива срабатывает сразу на всех элементах. И из-за этого, очевидно, не открывается ни один фильтр. Как можно эту директиву приписать только к одному элементу (как-то использовать :key)?

app.directive('click-out', <Directive>{
  mounted(el, { value }) {
    el.clickOutsideEvent = (event: Event) => {
      if (el === event.target || el.contains(event.target)) {
        value(event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(element) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
});

Answer 1

[MaxRyazan]

напиши директиву отдельно от компонента и потом повесь на нужный элемент.

import {Directive, DirectiveBinding} from "vue";

export const clickOutside: Directive<HTMLElement, string> = {
    mounted(el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.addEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                   bind.value()
                }
            })
        }
    },
    unmounted: function (el: HTMLElement, bind: DirectiveBinding) {
        if(bind.value) {
            window.removeEventListener('click', (e) => {
                if(!el.contains(<HTMLElement>e.target)) {
                    bind.value()
                }
            })
        }
    }
}

Это общая директива. И затем вешаешь на любой компонент какой нужен на корневой div

<div v-click-outside="() => isFilterOpen = false">
   ....
 </div>

А твоя директива закрывает все сразу компоненты, потому что это логично. Если она работает на всех твоих фильтрах, то клик вне конкретного фильтра - его закрывает. Соответственно если у тебя открыты все сразу фильтры и ты кликнешь ГДЕ УГОДНО на странице, то закроются все фильтры сразу.
Конечно, если кликнуть на фильтре вместо "где угодно", то закроются все фильтры кроме того, на котором ты кликнул

Comments

[Aetae]

Мужик, твой removeEventListener работать не будет, потому что удалять надо то что навешали. И if(bind.value) бессмыслено, т.к. за время перед кликом оно может поменяться.
В общем дичь ты написал.

[MaxRyazan]

куратор отписал бред)
работаю с этим проектом почти год и ни 1 проблемы,)
и работает, и закрывается и удаляются евент листнеры)
Вы вообще поняли, что там написано? Судя по комменту - совсем нет

[Aetae]

MaxRyazan, никакие листенеры у тебя не удаляются, мистер вечный джун.
У тебя они бесконечно навешиваются и не падают только потому, что сохраняют в замыкании ссылку на уже удалённый из dom элемент, тем самым организуя утечку памяти.
Чтоб removeEventListener сработал ему надо передать ссылку на существующий обработчик, как это делает автор поста, а не новосозданную анонимную функцию.

[MaxRyazan]

Вообще нет. Специально для тебя открыл девтулзы и проверил количество листренов) сколько элементов с этой директивой на странице, столько и слушателей - и после открытия-закрытия элементов тоже)

И обработчики удаляются, мистер куратор - потому что мы передаём в директиву функцию, пусть и анонимную, и и засовываем её в листенер, а потом такой же листенер с этой же функцией и удаляем.
Если куратор не заметил, bind.value() - это и есть обработчик. И в add и в remove он одинаковый

[Aetae]

MaxRyazan, вот тебе пример:

Сколько ты по-толгглишь элемент, столько clickOutside обработчиков у тебя и навесится. Потом при внешнем клике у тебя столько раз он и вызовется(причём уже без учёта элемента - потому что это уже другой элемемент).

Потому что, , чтобы removeEventListener убрал предыдущий обработчик, ему этот самый обработчик надо передать, а не новую функцию, с виду похожую на него.

Answer 2

[Aetae]

Судя по названию директивы у тебя ошибка в логике:

if (el === event.target || el.contains(event.target)) {

->

if (el !== event.target && !el.contains(event.target)) {

->

if (!el.contains(event.target)) { 
// contains работает на самого себя, дополнительно проверять не надо

Мы ловим клик снаружи, т.е. не равный выбранному элементу, а у тебя ловится клик на самом элементе, т.е. как будто это простой @click.

Также по-хорошему следует предусмотреть update на случай обновления value, иначе у тебя директива поломается при его реактивном изменении(обычно конечно не меняют, но зачем закладывать бомбу?).