народ, очень нужно ваше авторитетное мнение, подскажите правильный паттерн для такой ситуации: 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)? Есть ли какие-то более чистые альтернативы? Напоминаю, цель - удобная работа с формами на много полей…

да

но как можно подвязать v-model дочернего компонента на пропс? разве это не то же самое, что мутировать пропсы?

пропсы вниз, эвенты вверх.

ивент на изменение каждого каждого инпута?

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

Либо компонент-родитель Product для таких целей должен был бы хранить копию своих же данных на случай необходимости “сбросить” их? Ну, интересуюсь просто как это “принято” делать

да хрен его знает, там измнеений не так уж и много

Зато наконец файлы тестов, лежащие рядом с компонентами в бандл попадать не будут!)

отвернулся, а у вьютифай русская дока появилась

почаще отворачивайся

надеюсь что станет популярной как елемент уи

отвернулся, а у вьютифай русская дока появилась

народ, очень нужно ваше авторитетное мнение, подскажите правильный паттерн для такой ситуации: 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)? Есть ли какие-то более чистые альтернативы? Напоминаю, цель - удобная работа с формами на много полей…

допустим, я хочу это сделать как говорит @houd1n1 <ProductInfo> <input type=“text” name=“description” v-on:input=“emitInputChange(event.target.value, ‘description’)”> </ProductInfo> где обработчик делает примерно следующее: emitInputChange(newValue, fieldName) { this.$emit(‘inputValueChange’, {field: fieldName, value: newValue}); } тогда родитель может одинаково обработать изменения каждого инпута и сам поменять значения в своих локальных данных? <Product> <ProductInfo v-on:inputValueChange=“handleChange” / > </Product> так это задумано?

то есть тупо повесить на него шото вроде :class="cond?'class_when_true':''" нельзя

https://www.youtube.com/watch?v=gsffg5xxFQI - Clojure в JS

можно, но не будет работать

А вот VueJS в ClojureScript https://github.com/Gonzih/glue

так вуй посылает наюух если крепить корневой компонент в бади

А вот VueJS в ClojureScript https://github.com/Gonzih/glue

так вуй посылает наюух если крепить корневой компонент в бади

так вуй посылает наюух если крепить корневой компонент в бади

А если сделать корневой компонент единственным в боди <body> <div id="app"></div> </body>

судя по всему @c01nd01r прав

и что? директивы вуя в таком случае на бади не распространяются

Кто-нибудь билдер реализовывал для Vue компонентов?

шо такое билдер?

Захотел изучить. js знаю так в среднем) базовый

😢

Либо компонент-родитель Product для таких целей должен был бы хранить копию своих же данных на случай необходимости “сбросить” их? Ну, интересуюсь просто как это “принято” делать

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