Правильно ли таким образом работать с данными компонента через директиву?

Question

[vism]

jsfiddle.net/f7v1deuw

Пример абстрактный.
Разбираюсь в возможностях директивы.

Подскажите пожалуйста правильно ли я использую JS и Vue для изменения данных компонента.

Object.assign(binding.value.object, {
        [binding.value.field]: "some new val"
      });

Answer 1

[Александр Гонтарев]

на самом деле не совсем понятно, как работать с директивам, но у меня сложилось такое впечатление
1) изменять данные компонента в директиве плохо, потому что нарушается data-way, сложно отследить что вообще происходит с компонентом и в dev-tools директивы никак не дебажатся
2) директива работает напрямую с dom элементом, а не с компонентом, т.е. подразумевая, что вы не должны изменять данные компонента из вне, но вы можете кастомизировать html, типа добавлить классы или всякие эффекты
3) баг с добавлением классов
проблема в том, что если изменится класс в компоненте, то через директиву уже не получится снова повесить класс, el.classList.add('white'); будет игнорироваться, демка

Comments

[vism]

как тогда работает директива v-model ))

[Александр Гонтарев]

vism, v-model это почти синтаксический сахар, сокращение от

<input :value="myvalue" @input="myvalue = $event.target.value" />

[vism]

Александр Гонтарев, то что вы привели это биндинг и ивент.
А я говорю про директиву.

[vism]

Александр Гонтарев,

Vue.directive('model', {
});

[Александр Гонтарев]

Если хотите более глубоко посмотреть как работает v-model, то вот ссылка на исходник директивы

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

[vism]

Александр Гонтарев, Ухты, я это не мог найти.
Спасибо большое.
То что надо.