такой ситуации:
1) Имеем множество компонентов типа “User”, “Product” и прочее, у них у всех есть свои локальные данные типа “Name”, “Phone”, “Price” и т.д, получаемые по API
2) Эти компоненты имеют “детей”, которые должны иметь возможность менять как-то эти данные для родителя, например, компонент “ProductInfo”, который имеет большую форму на 20 полей, данные которой должны соответствовать данным родителя и быть изменяемыми.
3) Сделать так, чтобы поля формы “ProductInfo” были подвязаны на props родителя - так себе вариант:
- v-model не поюзаешь, пропсы мутировать нельзя
- на каждое изменение некоторого поля надо эмитить ивент родителю?…
4) Сделать через computed setter: даже не представляю как, ведь данные хранятся в родителе, в пропсах, их мутировать нельзя в любом случае. Vuex тоже тут так себе помощник, this.state.user_name = … делать нельзя, а писать какие-то хитровыдуманные мутации “на все случаи жизни” тоже как-то некрасиво получается
5) Остается один вариант: при маунте (или когда мне нужно) дочернего компонента ProductInfo СКОПИРОВАТЬ данные полученные в пропсах от родители Product в локальные, мутируемые данные, далее делать с ними что хочешь, редактировать, дергать урлы АПИ, и прочее, и может только потом (при успешном сохраненнии) сообщать родителю актуальные данные (или просить его рефрешнуться)
Правильный ли это подход (№5)? Есть ли какие-то более чистые альтернативы? Напоминаю, цель - удобная работа с формами на много полей…
в-модель поюзаешь. и это точно то же самое что эмитить родиелю, и это правильно.
Так? <product> <product-info> <field> <field>
Можно сделать :prop.sync
Обсуждают сегодня