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

293
06 июля 2017, 04:10

Интересует возможность изменения входящего параметра в дериктиве.

Пример не рабочего кода:

Шаблон:

<div v-my-directive="poss.y"></div>

Дериктива:

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 в самой дериктиве, не прибегая к артрибутам тега?

Answer 1

На сколько я понял, вы хотите изменить значение передаваемого в директиву аргумента, причем не просто изменить его внутри директивы, а у компонента в котором создана дитектива. Если так то рекомендую вам обратиться к атрибуту 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", проверить это можно нажав на элемент.

READ ALSO
Создание бота на Python + JS [требует правки]
javascript

Создание бота на Python + JS [требует правки]

Мне нужно создать одну программуВ ней требуются знания JS, которых у меня пока нет

 309
Почему фильтр ищет только по числам? VueJS
javascript

Почему фильтр ищет только по числам? VueJS

Почему данный фильтр, с помощью v-model, фильтрует массив terminal исключительно по числам ( если буду вводить символы - ничего не находит )? Ссылка...

 185
Валидация input FALSE or TRUE
javascript

Валидация input FALSE or TRUE

Вам нужен метод checkValidity:

 158
Возврат во вкладку для web notification
javascript

Возврат во вкладку для web notification

По определенным событиям создается уведомление в браузерИ вызывается следующим образом:

 205