MXLTN
axios.patch(
Baur
Как сделать re-render компонента в котором находишься ?
Baur
подскажите плз
Rafael 🌵
Или поменять данные
Baur
спасибо , щас попробую
Dmitriy
ok, потому что в инете нашел что принято делать вроде как в vm
ну смотри, если все что нужно поменять находится в рамках одного компонента,то просто меняй стейт, если в других - пробоасывай собитие, а где надо - лови его! профит
MXLTN
еще вопрос - для checkbox лучше не испльзовать v-on:click а какая альтенатива?
MXLTN
Dmitriy
чекбокс - это просто инпут, так что просто пишешь в нем v-model="attr_name"
Anton
v-on:change)
Oleksandr
чекбокс - это просто инпут, так что просто пишешь в нем v-model="attr_name"
Тут про изменение спрашивают))
Dmitriy
еще вопрос - для checkbox лучше не испльзовать v-on:click а какая альтенатива?
а уже в компоненте смотришь за его изменением
watch: attr_name() {}
Dmitriy
Тут про изменение спрашивают))
ну все таки изменение чекбокса - это событие... лучше уж с данными работать))
Anton
В документации прекрастно описаны кейсы и с нативными инпутами и с кастомными. Лучше там спрашивать :)
Oleksandr
а уже в компоненте смотришь за его изменением
watch: attr_name() {}
Это антипаттерн. Уж извините
Dmitriy
onchange на инпуте - это антипаттерн))
Dmitriy
это ж не реакт
Rafael 🌵
Computed - это когда тебе важен результат на факт изменения
Watch - это когда важен факт изменения, но пофиг на его результат
Oleksandr
Computed - это когда тебе важен результат на факт изменения
Watch - это когда важен факт изменения, но пофиг на его результат
Тут вопрос про то как событие вызвать
Oleksandr
Вы предлагаеие вотчить изменение и вызывать метод?)
Stanislav
ну вот логика на клик сделать то-се - делается в компоненте?
Вообще, сейчас в модных фреймворках принято разделять компоненты на "умные" и "глупые".
В умном ты рулишь запросами, работаешь с данными.
Глупым компонентам передаешь данные для отрисовки и в случае с Vue, отправляешь события из них события.
Судя по твоему описанию, ты получаешь начальное состояние в "умном" родительском компоненте, запихиваешь его в data, а по данным из data список "глупых" детей.
В дети, через пропсы, передаешь состояние ребенка.
Когда ребенок меняет состояние (чекбокс меняется), emit'ишь событие.
Это событие отлавливаешь в "умном" родительском компоненте и дергаешь метод, который отправлет запрос на сервер.
Сервер тебе присылает новое состояние. Обновляешь состояние в "умном" родительском компоненте и Vue сам магическим образом перерисовывает тебе ребенка.
Это так, в общем. Могут быть всякие поправки и отступления.
Oleksandr
Найс
MXLTN
чудесно спасибо за пощь, все сделал как посоветовали - работает супер, теперь только вопрос - как отделить изменение стейта на фронт енде и на бекенде? что бы чекбокс не чекался пока сервер не вернул 200 или как обеспечивается консистентность состояния компонента и бекенда?
Stanislav
Давно я такие портянки не писал :)
Stanislav
чудесное описание, но я уже хочу переписаьб детей на умных))
Ну, может быть. От условий зависит.
Это был один маленький кейс в рамках пары компонентов родитель-ребенок
Dmitriy
чудесно спасибо за пощь, все сделал как посоветовали - работает супер, теперь только вопрос - как отделить изменение стейта на фронт енде и на бекенде? что бы чекбокс не чекался пока сервер не вернул 200 или как обеспечивается консистентность состояния компонента и бекенда?
хороший вопрос... как вариант переписать чекбоксы на свои) и ловить v-click
Stanislav
хороший вопрос... как вариант переписать чекбоксы на свои) и ловить v-click
или просто @change="handleChange" :)
Dmitriy
или просто @change="handleChange" :)
но он же изменится... а ему надо что бы не менялся
MXLTN
а есть какой-то бест практис по тому как обеспечить консистентность состояния компонента и бекенда?
Tom
MXLTN
главное что бы в итоге - одинаковый был резултат на бекенде и фронте
MXLTN
а ну тогда жди ответ от сервера, а если не 200 - меняй обратно
вариант, не сильно красивый т к не хочется показывать что что-то поменялось когда оно не поменялось и потом сброистся))
но как вариант понятен
Tom
Первая глава в книге TypeScript Design Patterns - подробно описывает решение вашей задачи
Stanislav
но он же изменится... а ему надо что бы не менялся
А, в смысле кликнул и галочка должна поменяться только после ответа сервера?
Ну тогда какую-нить крутилку вешать v-if/v-else и т.д.
Oleksandr
главное что бы в итоге - одинаковый был резултат на бекенде и фронте
Враппер кастом чекбокс
Oleksandr
Хендлиш клик
Anton
а ну тогда жди ответ от сервера, а если не 200 - меняй обратно
За что же так не любить людей? Дайте им честную ошибку
MXLTN
Tom
Могу кинуть файл)
Vladyslav
Привет ребята)
Rafael 🌵
Первая глава в книге TypeScript Design Patterns - подробно описывает решение вашей задачи
Сколько в ней страниц?
Oleksandr
Всем
Tom
200~
Stanislav
а ну тогда жди ответ от сервера, а если не 200 - меняй обратно
С нативными чекбоксами не очень красиво выйдет)
Tom
Оп оп)
Dmitriy
Подробнее, пожалуйста :)
https://ru.vuejs.org/v2/guide/forms.html#%D0%A7%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B - ни слова про v-change... и повторюсь, вью - не реакт, здесь не надо ловить события типа change - фреймворк сам это сделает за вас
Stanislav
Vladyslav
Кто чекнет статейку мою, о Vuex :)
Dmitriy
сириусли?
Stanislav
Oleksandr
Обработка событий — Vue.js
https://ru.vuejs.org/v2/guide/events.html
Stanislav
читайте документацию
Каким образом Vue отловит событие с чекбокса, если я ему это не укажу?
Anton
https://ru.vuejs.org/v2/guide/forms.html#%D0%A7%D0%B5%D0%BA%D0%B1%D0%BE%D0%BA%D1%81%D1%8B - ни слова про v-change... и повторюсь, вью - не реакт, здесь не надо ловить события типа change - фреймворк сам это сделает за вас
А причем тут антипаттерн? В примере рассматривается работа на голом нативном инпуте. Если нужны кастомные, то там совсем другая логика, примерно такая https://ru.vuejs.org/v2/guide/components.html#Поля-ввода-форм-с-использованием-пользовательских-событий
Tom
Tom
Here you are
Oleksandr
Вотчить?))
Vladyslav
@idrmn а @change не походит?