именно нужный div

https://jsfiddle.net/my54bhwn/ нашол

может кому то тоже пригодится

Мистика какая-то. Писал статьи, просмотров не слишком много. Так вышло что сейчас временно перестал. Просмотры ползут вверх, лайки ставят ?

Ребят, а как обратится к методу внутри компонента?

Ребят, а как обратится к методу внутри компонента?

Через this?

Через this?

Он ругается, что this.getOrder is not a function

Он ругается, что this.getOrder is not a function

Покажи пример когда ругается

Он ругается, что this.getOrder is not a function

Включи отладчик в браузере, поставь брейкпоинты

Покажи пример когда ругается

https://hastebin.com/inewifufey.xml

Включи отладчик в браузере, поставь брейкпоинты

ок, поищу. Раньше консоли хватало )

уже вижу ошибку )

шикарно. вернул 2006

Покажи пример когда ругается

Поправил, но получаю ту же ошибку https://hastebin.com/xurafajofu.xml

Орнул

а чего не jsfiddle где сразу потыкать можно)

а чего не jsfiddle где сразу потыкать можно)

Ща )

а чего не jsfiddle где сразу потыкать можно)

Всему учить нужно эту молодежь

ну потому что так вроде нельзя в других компонентах методы вызывать

я бы немного по-другому наверное сделал, если правильно понимаю концепцию. id передавать в компонент как props, и внутри компонента добавить watch для отслеживания. Когда он поменялся вызывать метод что запросит новые данные для order

Новый vue-router выпускать собираются... а с обновлением vue тянут что-то

Новый vue-router выпускать собираются... а с обновлением vue тянут что-то

новый? мажорную или минорну версию?

2.5.0

и что там нового будет?

сейчас начну переводить узнаю ?

я бы немного по-другому наверное сделал, если правильно понимаю концепцию. id передавать в компонент как props, и внутри компонента добавить watch для отслеживания. Когда он поменялся вызывать метод что запросит новые данные для order

У меня идея такая, что нужно грохнуть один div, на его место подставить компонент.

У меня идея такая, что нужно грохнуть один div, на его место подставить компонент.

когда Vue используешь тебе не нужно самому грохать див

когда Vue используешь тебе не нужно самому грохать див

https://jsfiddle.net/4njvnfzp/

Дак я вроде и грохаю )

я бы немного по-другому наверное сделал, если правильно понимаю концепцию. id передавать в компонент как props, и внутри компонента добавить watch для отслеживания. Когда он поменялся вызывать метод что запросит новые данные для order

Не пойму логику вообщем... Смотрите, у меня есть страница с заказом в интернет магазине. Мне нужна возможность этот заказ отредактировать. Раньше для этого была отдельная страница, сейчас хочу сделать все внутри. Заказ отображается таблицей, я ее грохаю через метод this.showTable = false; Далее показываю компонент - метод this.showOrderEdit = true; Запрашиваю данные с сервера и хочу вставить в него данные - методthis.getOrder(id); Я с фреймом только начал знакомиться, возможно я не верно понимаю механизм..

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

Просто компоненты про друг друга знают мало, и так ввалиться в одном компоненте вызвать метод другого нельзя

Так расшарьте данные?

Так расшарьте данные?

Как?

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

Ну я не хочу показывать сразу инпуты. Редактирование не так часто происходит

Ну я не хочу показывать сразу инпуты. Редактирование не так часто происходит

Так ты и не показывай, просто объект с ордером уже есть загруженный, его же можно и использовать для редактирования и не нужно повторно запрашивать с сервера

Так ты и не показывай, просто объект с ордером уже есть загруженный, его же можно и использовать для редактирования и не нужно повторно запрашивать с сервера

Объект на текущий момент генерируется бэком и представляет собой просто верстку

Ох не люблю я серверный рендер...

Можно например скрывать до поры до времени компонент редактирования. Ждем когда нажмут на кнопку, компонент должен стать видимым, ему прокидываются входные данные, в компоненте срабатывает mounted в котором можно сделать запрос на сервер и получить необходимое

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

Ну это повсеместный принцип, вниз передаются props, наверх всплывают события

Можно например скрывать до поры до времени компонент редактирования. Ждем когда нажмут на кнопку, компонент должен стать видимым, ему прокидываются входные данные, в компоненте срабатывает mounted в котором можно сделать запрос на сервер и получить необходимое

ок, подумаю над такой формой реализации )

В документации даже красивая картинка нарисована на эту тему :) не читали?

Можно пропсы... Можно общий стор

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

В документации даже красивая картинка нарисована на эту тему :) не читали?

Читал, но сходу все освоить и понять сложно :)

Чтобы не дублировать данные и не гонять туда-сюда общий стор незаменим.

сейчас начну переводить узнаю ?

кинешь ссылку?

Особенно когда данных реально много

Ну когда разрастается приложение это может стать необходимым. А всем новичкам и во все простые приложения советовать такое — мне кажется излишне

Смотря что планируется... Иногда в середине проекта начинаешь жалеть что не сделал сразу как надо

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

Ну не знаю... Общий стор абсолютно не сложен в написании и поддержке

Спасибо ребят. Разобрался. Просто комонент работает с уже готовыми данными, которые заберает через props. Весьма удобно

ребзь, а jsfiddle поддерживает async/await?

или какой сайт поддерживает?

ребзь, а jsfiddle поддерживает async/await?

https://jsfiddle.net/Ajedi32/vfjzkerj/

ребзь, а jsfiddle поддерживает async/await?

Там можно бабель выбрать, правда я хз какие там пресеты

https://jsfiddle.net/Ajedi32/vfjzkerj/

пасяб

Ребят, как вьюшному transition можно запилить slideUp/slideDown анимацию?

я чет не втыкаю

Ребят, как вьюшному transition можно запилить slideUp/slideDown анимацию?

Так вроде в доках это есть

неа

slide нету

Ребят, как вьюшному transition можно запилить slideUp/slideDown анимацию?

Ну так можно взять animate.css какой, где такая анимация есть (или запилить свою), а во Vue играться с классами анимации этой

я пытался и нифига не получилось

ERROR: S client not available

типа, height не работает с transition

нужна фиксированная высота только

пример есть?)

transition(name="slide") div(v-if="condition") банально .slide-enter .slide-leave-active height 0 .slide-enter-active .slide-leave-active transition height .5s ease-in-out

transition(name="slide") div(v-if="condition") банально .slide-enter .slide-leave-active height 0 .slide-enter-active .slide-leave-active transition height .5s ease-in-out

Вью тут не виноват. Надо анимировать max-height

я пробовал max-height

не выходит все равно

Вью тут не виноват. Надо анимировать max-height

и знаю, что он не виноват

а если попробовать заюзать классы от aminate.css? и если заработает посмотреть как они решают

подскажите какое-нить руководство, которое поможет разобраться с компонентами (доки курю, но пока не помогает) :)

а то создал стартовое приложение vue init webpack test, пытаюсь к нему компонент модального окна прикрутить (vue-js-modal) - пока никак =/

а если попробовать заюзать классы от aminate.css? и если заработает посмотреть как они решают

они не так работают

Мне нужно, чтобы блок свернулся, и содержимое ниже так же плавно поднялось

А в animate.css блок сначала сворачивается, а потом пустое место от него исчезает

https://ymatuhin.ru/front-end/height_transition_css/

что не работает то)

transition(name="slide") div(v-if="condition") банально .slide-enter .slide-leave-active height 0 .slide-enter-active .slide-leave-active transition height .5s ease-in-out

ну вот заменить height на max-height и ничего не работает

ну вот заменить height на max-height и ничего не работает

Покажи код в песочнице?

div(:class="[visible ? 'ff' : 'ff ff-hidden']") test .ff max-height auto transition max-height .5s ease-in-out overflow hidden .ff-hidden max-height 0 Вот, без вьюшного `transition`даже

а, все, работает

но только с пикселями (max-height в .ff нужно в пикселях указать)

как-то тупо

У max-height нет значения auto

none

прошу помощи. Пытасю в проект добавить плагин-маску для инпута. Установил vue-text-mask. После этого иду в html и там делаю <form action="#" method="post" class="callme"> <div class="callme_item"> {{--<input type="tel" name="phone" placeholder="Телефон">--}} <masked-input type="text" name="phone" placeholder="Телефон" v-model="phone" :mask="['(',/[1-9]/, /\d/,/\d/,')',' ', /\d/,/\d/,/\d/, '-', /\d/,/\d/,/\d/,/\d/]" :guide="false" placeholderChar="#" > </masked-input> </div> <div class="callme_item"> <input type="submit" value="Подключиться"> </div> </form> Затем иду в js-файл и там делаю const MaskedInput = require('vue-text-mask'); Vue.component('masked-input', MaskedInput); new Vue({ el: 'form.callme', props: {}, data: { phone: '', } }); Результатом является отсутствие какого бы то ни было инпута на странице и надпись в консоли (на скрине). Я понимаю, что там написано об отсутствии возможности заюзать метод render, однако в компоненте он 100% есть, подключил я компонент глобально, сам пример использования взял с сайта с докой их... ЧЯДНТ?

при таком js тоже не работает const MaskedInput = require('vue-text-mask'); new Vue({ el: 'form.callme', props: {}, data: { phone: '', }, beforeMount:function(){ console.log('beforeMount', this); }, mounted: function () { console.log('mounted', this); }, components: { 'masked-input': MaskedInput } });

утра всем

подскажите, как можно добавить новую строку в таблице?

для начала в какой базе данных

и как ты хочешь добавить - запросом или ручками

и как ты хочешь добавить - запросом или ручками

Руками, пока остановился на https://jsfiddle.net/7nxhygLp/