Как правильно менять данные в модели?

Question

[Tenebrius]

Насколько я понимаю во второй версии VUE упразднили двусторонний биндинг.
Данные передаются вниз (от предка потомку), события всплывают вверх.

Собственно вопрос, как правильно поменять данные вышестоящего элемента?

Для примера нечто вроде группы радиокнопок, при клике в модели должно меняться значение свойства, хранящее id выделенного элемента. Как это сделать?

https://jsfiddle.net/Tenebrius/pjt6fcg0/20/

Основной объект модели - arr, должно меняться свойство selectedTagId.

Answer 1

[0xD34F]

Вешаете обработчик клика на smth-tag, передаёте в него id выбранного элемента, и группу к которой элемент принадлежит, устанавливаете selectedTagId. Всё.

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

А как это сделать из компонента, а не из корневого экземпляра VUE?

Никак, это абсурд. То есть, можно конечно из дочернего компонента постучаться в $root / $parent и что-то там поменять, но делать такого НЕ НАДО. Данные лежат в корневом компоненте - вот там их и меняйте.

Или вы имели в виду отправку события из дочернего компонента? Пробросить событие через smth-group не выйдет, т.к. слотам нельзя назначать обработчики событий. Остаётся вариант с шиной событий (ну и vuex ещё), но в общем случае - сделать всё равно не получится, так как smth-tag не знает к какой группе принадлежат его данные (однако, если гарантируется, что id уникальны не только в пределах группы, а вообще - тогда можно, например так).

Comments

[Tenebrius]

Спасибо. А как это сделать из компонента, а не из корневого экземпляра VUE?

[0xD34F]

Tenebrius, дополнил ответ.

[Tenebrius]

0xD34F, ответ понял, спасибо. В основном меня интересует некая инкапсуляция. Чтобы можно было те три компонента, которые всегда в связке работают, использовать в разных проектах. И чтобы все методы были внутри компонентов, а не разбросаны по коду.
Или это противоречит логике VUE?

[0xD34F]

Tenebrius, какая ещё инкапсуляция? Не вижу связи с исходным вопросом. Наверное, вам следует задать новый.