Как динамически добавлять eventListener во vue?

Question

[RomanKudlatov]

При использование vue и навешивание на какие то селекторы eventListener при загрузке страницы, если используется v-if то при скрытии элемента удаляется eventListener . Понял что можно решить используя v-show, но теперь думаю есть ли возможность использовать v-if и что бы не происходило удаление?

Comments

[iBird Rose]

посмотри Пользовательские директивы https://ru.vuejs.org/v2/guide/custom-directive.html
может подойдут тебе

Answer 1

[Антон Антон]

А чем не устраивают собственные обработчики vue? https://ru.vuejs.org/v2/api/#v-on

Comments

[RomanKudlatov]

Ну не совсем, просто действие я так посчитал логически правильно написать в другом компоненте, и нужно от туда дотягиваться в разметку.

[RomanKudlatov]

Смотри задача у меня такая, сделать на странице пользовательский курсор(просто Спан который таскается по странице за мышкой).
И вот что бы сделать как в css, при наведении на ссылку допустим палец по стандарту. Я в разметке data атрибутом просто помечаю каким должен быть курсор.
А потом мне кажется что при mouseEnter на элемент с этим data атрибутом надо добавить новый класс мышке(ну и соответственно убрать при mouseLeave).
Поэтому кажется что логика должна быть в файле с компонентом мыши.

[Антон Антон]

используй вместо (или совместно) data атрибута запись в store или отправку события в event bus, а в компоненте курсора - соответственно, либо вычисляемый класс, либо прослушивание событий шины

[RomanKudlatov]

Антон Антон, изящно, спасибо, а store это который из vuex?

[Антон Антон]

RomanKudlatov, да

[Антон Антон]

RomanKudlatov, а еще это можно завернуть в директиву и использовать как нибудь типа v-cursor="value"
https://ru.vuejs.org/v2/guide/custom-directive.html

[RomanKudlatov]

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

[Aetae]

А что мешает тогда на чисто css решении и остановиться?

[Антон Антон]

Aetae, а ведь и правда, htmlbook.ru/css/cursor работает вообще без js

[RomanKudlatov]

Aetae, там нужно подключать картинку к курсору, а мне надо сделать анимированные переходы из одного состояния в другое.

[RomanKudlatov]

Антон Антон , В общем сделал через кастомные директивы, код уменьшился раза в 2 к первоначальному рабочему варианту. Но теперь думаю как избавиться от двойных ковычек)
v-cursor:action="'action'"

[Aetae]

RomanKudlatov, коли оно статично я юзаю модификаторы: v-cursor:action.name. Это слегка некрасиво, но всяко лучше двойных кавычек.

[Антон Антон]

RomanKudlatov, просто v-cursor:action?

[RomanKudlatov]

Антон Антон, спасибо)