Как правильно добавлять и удалять обработчики событий в директиве (Vue)?

Question

[Даниил Попов]

Разбираюсь в директивах и одновременно пытаюсь создать свою. Но столкнулся с проблемой: если использовать внешнюю функцию, то при привязке(bind) возможно добавить обработчик событий к элементу, а при отвязке(unbind), соответственно, удалить, но как при этом сохранить доступ к el и binding?

Пример:

function getKey(e) {
  console.log("key", e.key);
  console.log("binding.value", binding.value); // недоступно через замыкания
}

Vue.directive("input-test", {
  bind: function(el, binding) {
    el.addEventListener("keydown", getKey); 
  },
  unbind: function(el) {
    el.removeEventListener("keydown", getKey);
  }
});

Как решить данную проблему и есть-ли хорошие практики для подобных ситуаций? Возможно-ли создавать внутренние функции для директивы, которые будут доступны во всех хуках?

Answer 1

[0xD34F]

сохранить доступ к el и binding

Элемент будет доступен как this.

Что до binding - можно использовать dataset для передачи значения. Например.

UPD. Вынесено из комментариев:

датасет дает нам возможность сохранять только примитивы

Можно прицепить интересующий вас объект к элементу в качестве его свойства, типа так. Или использовать Map/WeakMap, где ключом будет элемент, например.

А вообще, возможно, что вы неверно выбрали инструмент для решения своей проблемы, и тут вместо директивы следует использовать компонент.

Comments

[Даниил Попов]

Да, вы правы и именно так написано в руководстве, но датасет дает нам возможность сохранять только примитивы, никак не функцию. В данном примере ни binding, ни vnode передать не получится. Ну может только создать функцию через конструктор в bind, включив в нее нужные объекты, а ссылку на нее сохранить во внешней переменной.
Но посмотрите, это все выглядит как костыли. Такое ощущение, что есть решение проще и логичнее

[0xD34F]

Даниил Попов, дополнил ответ.