Andrey
а в каком условии участвует этот инпут
Alexander
когда флаг isEdit=true
Alexander
этот флааг не меняется
Lex
народ подскажите, props для мобильных устройств не очень удобен? При загрузке страницы не успевает загрузить данные. Или что то я упускаю или слишком злоупотребляю им
Andrey
так, а задача у тебя какая?
Andrey
при вводе показать кнопку?
Lex
в инпут данные подставить
Alexander
задача отправлять данные на на сервер, но я не хочу давать возможность нажимать на кнопку если данные не изменялись
Alexander
вот подставить данные это идея) еще есть вариант попробовать кнопку вынести в отдельный компонент
Alexander
и там держать флаг активно/неактивно
Hedint
народ подскажите, props для мобильных устройств не очень удобен? При загрузке страницы не успевает загрузить данные. Или что то я упускаю или слишком злоупотребляю им
пропсы не имеют отношения к устройству :)
скорее всего тебе просто нужен какой-то флаг, что данные загрузились, на внешнем диве, в котором все остальные компоненты, которым нужны данные (в которые прокидываются пропсы)
Alexander
спасибо
Alexander
не буду так делать
Lex
да понятное дело, тут скорей всего вопрос в задержке, если ставлю 500ms, то норм грузит, но это как бы не дело
Lex
пропсы не имеют отношения к устройству :)
скорее всего тебе просто нужен какой-то флаг, что данные загрузились, на внешнем диве, в котором все остальные компоненты, которым нужны данные (в которые прокидываются пропсы)
Andrey
http://prntscr.com/ilfyzv - это темплейт
http://prntscr.com/ilfzl4 - обработка события @input
http://prntscr.com/ilg00u - это UI
и вот когда я введу одно значения в импут, сработает @input хендлер через 3с изменит флаг для того что бы кнопка соранить стала доступна и в импуте это значения пропадает мне кажетя он просто перерындывается.
делаешь у кнопки :disabled="disabledSaveBtn"
у инпута @input="onChange(grade.id)"
в onChange делаешь логику и меняешь disabledSaveBtn
Andrey
значение пропадает возможно потому что у тебя value меняется
Andrey
точнее меняется переменная которая забинджена на value
Andrey
все события и значения переменных ты можешь глянуть чез девтулзы для vue
Alexander
нет я эту переменную не меняю
Alexander
которая забинджена на :value
Alexander
если я убирают изменения флага this.disableSaveBtn = false; все работает корректно
Alexander
Подскажите как организовать layout?
Есть общий layout - в нем header и footer
есть admin layout - в нем sidebar
Так вот хочу чтобы на роутах
/admin/dashboard
/admin/users и подобных
короче только в "поддиректории" admin был sidebar, как это правильно сделать?
computed: {
isAdminRoute() {
return this.$router.currentRoute.path.substr(0,7) == '/admin/';
}
},
срабатывает только при перезагрузке страницы (
Andrey
если я убирают изменения флага this.disableSaveBtn = false; все работает корректно
а если ты сэт таймаут уберешь, но при этом изменение disabledSaveBtn оставишь, то все равно не работает?
Andrey
Подскажите как организовать layout?
Есть общий layout - в нем header и footer
есть admin layout - в нем sidebar
Так вот хочу чтобы на роутах
/admin/dashboard
/admin/users и подобных
короче только в "поддиректории" admin был sidebar, как это правильно сделать?
computed: {
isAdminRoute() {
return this.$router.currentRoute.path.substr(0,7) == '/admin/';
}
},
срабатывает только при перезагрузке страницы (
можно в шаблоне слотами воспользоваться, наверное
Alexander
сет тайм аут я добавил для себя когда искал в чем причина, нашел что причина прии смене значения этой переменной добавил таймаут что бы проверить это.
Andrey
а покажи темплейт кнопки
Alexander
а вообще там без таймаута
Andrey
disabledSaveBtn где-то еще юзается?
Alexander
http://prntscr.com/ilg97c
Alexander
нет только на кнопке
Alexander
песочнуцу может кто подсказать что бы вуе с темплейтами работал? попробую там эту багу воспроизвести
ℝei
Alexander
спасибо за песочницу
Bogdan
ктонибудь graphql использовал в качестве апи?
Andrey
да
Andrey
крутая тема для фронта, для бекендера боль
Andrey
но зависит от проекта конечно
Andrey
есть еще проблема с безопасностью, можно так связанные с сущностью данные получить там, где их получать нельзя. Это надо все предусматривать и закрывать хаками
Alexander
Вот воспроизвел багу https://codesandbox.io/s/mjx985pm49
Alexander
исходят из примера получается что рендерится не кнопка в которой надо изменить атрибут а ввесь компонент
Alexander
или я что-то не верно сделал?
Nikita
обьясни о какой именно ты баги говоришь?
Nikita
для новеньких
Nikita
кто не в теме, о чем ты
Alexander
зайдийдите https://codesandbox.io/s/mjx985pm49 попробуйте ввести что то в любой из импутов
Nikita
зашел, ввел
Alexander
первое нажатия сделает отмену
Nikita
а, именно первый раз символ не входит, типо?
Alexander
да
Alexander
только он входит
Alexander
но тут же происходит ререндер
Alexander
это можно заметить если добавить сеттаймаут https://codesandbox.io/s/mjx985pm49
Alexander
Вот и спрашивал я выше или это я накосячил или вуе при изменения данных в компоненте делает ререндер всего компонента а не только кнопки в моем случае
Nikita
да, выглядит как баг. Если убрать @input, то такого нет
Alexander
ну потому что если убрать @imput тогда не происходит изменений в компоненте
Alexander
Может кто-то знает как работает перерисовка компонентов, и сможет рассказать
Nikita
Напиши ишью на гитхаб в vue
Alexander
хорошо спасибо)
Phil
ну потому что если убрать @imput тогда не происходит изменений в компоненте
А тебе надо чтоб в родителе это информация обновлялась?) Ну была реактивной?)
Phil
data.price
Nikita
нет, баг в том, что импут прыгает
Hedint
https://github.com/vuejs/vue/issues/3787
Hedint
есть несколько похожая issue
Alexander
да баг такой же)
Phil
так вот я к тому же и говорю)
Alexander
вы немного не о том
Alexander
вот посмотрите https://codesandbox.io/s/mjx985pm49
Alexander
введите одно значения подождите 2с
Alexander
оно слитит когда поменяются данные
Phil
So what happens here is this:
onInput is triggered for the first time
this changes isDirty from true to false
this leads to a re-render of the component because isDirty is used in the render function
since the prop this.value is still an empty string '', the content of the input is reset.
subsequent calls to oInput don't lead to a re-render because this.isDirty is already true
This only happens because you don't $emit the event. If you do,
the parent gets the value
that triggers an update of the value prop in the child
that would lead to the new value being inserted in the input upon that first re-render.
...and everything would be fine. Your example broke the cycle, so to speak.
Phil
Ну как-то так))
Nikita
да, похожу это ломает цикл, но я попробовал, но странно, что даже :value.prop не помогает
Alexander
эмм... и как быть?)
Stanislav
эмм... и как быть?)
Попробуй убрать из шаблона биндинг/переменные, которые ты изменяешь и все заработает
Alexander
да, работает, пробовал, но а как мне тогда кнопку блокировать?)
Свежак
Привет, нужна помощь.
Есть плагин vue-croppa, который я присоединяю к системе через Vue.use(…).
Я пишу тест своего компонента (vue-test-utils и jest), который использует vue-croppa.
Управлять croppa можно обращаясь к его методам, через v-model.
Я хочу проверить один из методов своего компонента, в котором используется метод компонента vue-croppa, при этом мне нужно как-то эмулировать этот компонент в тесте.
Как это сделать? Как проверить, что вызывается метод компонента сroppa в моем методе, и нужно ли это проверять?