Страницы

Поиск по вопросам

суббота, 13 июля 2019 г.

Vue JS 2: Изменение binding.value в custom directive

Интересует возможность изменения входящего параметра в дериктиве.
Пример не рабочего кода:
Шаблон:


Дериктива:
Vue.directive('my-directive', { twoWay: true, update: function(el, binding) { binding.value = el.scrollHeight; } });
Много информации пересмотрел, конкретного решения не нашел. Изменять через HTMLElement.dataset не возможно, v-bind на пользовательском аттрибуте не работает. В официальной документации binding следует понимать как только для чтения и никогда не изменять его. У Evan You на github был пример решения подобной проблемы, но репозиторий был удален.
Данную дериктиву использую в компонентах, через $vm0 напрямую изменять нет возможности.
Есть ли сбособ изменить значение binding.value в самой дериктиве, не прибегая к артрибутам тега?


Ответ

На сколько я понял, вы хотите изменить значение передаваемого в директиву аргумента, причем не просто изменить его внутри директивы, а у компонента в котором создана дитектива. Если так то рекомендую вам обратиться к атрибуту vnode метода bind
https://vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments https://vuejs.org/v2/api/#VNode-Interface
Его свойство context - и есть ссылка на компонент в котором создана директива.
Vue.directive('my-directive', { bind: function (el, binding, vnode) { vnode.context.poss.y = 7; } });
Вот фиддл - при создании свойство poss.y имеет значение "2", при создании директивы оно обновляется на "7", проверить это можно нажав на элемент.

Комментариев нет:

Отправить комментарий