Естественно

Всем привет. Подскажите есть у кого опыт работы с асинхронными компонентами?

У меня опыт закончился с тем, что я заменил импорт обычный на динамический

Больше ничего другого не делал.

Тоже самое. Вы лучше спросите не то, что есть ли у кого-то опыт, а вашу (если она есть) проблему

У меня проблема такая. Я как и полагается возвращаю промис обьект. В нем генерирую полностью компонент, шаблон с сервера, переменные тоже с сервера. Вообщем полностью создаю компонент. После этого компонент монтируется и все прекрасно работает. Затем я перехожу в другой раздел, компонент соответственно уничтожается. Все вроде хорошо. Да забыл сказать что компонент обслуживает формы для пользователя. Значит после того когда пользователь открывает другую форму, то вот не задача, компонент не генерируется заново, а просто монтируется таким как и был до этого. Так вот вопрос как заставить генерироваться компонент каждый раз.

и в чем тут заключается асинхронность компонента ? :))

вообще само название какое то странное

У меня проблема такая. Я как и полагается возвращаю промис обьект. В нем генерирую полностью компонент, шаблон с сервера, переменные тоже с сервера. Вообщем полностью создаю компонент. После этого компонент монтируется и все прекрасно работает. Затем я перехожу в другой раздел, компонент соответственно уничтожается. Все вроде хорошо. Да забыл сказать что компонент обслуживает формы для пользователя. Значит после того когда пользователь открывает другую форму, то вот не задача, компонент не генерируется заново, а просто монтируется таким как и был до этого. Так вот вопрос как заставить генерироваться компонент каждый раз.

ты в каком месте делаешь динамический импорт компонента?

Ща доеду до дома напишу

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

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

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

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

ну класс создай типа empty-container и залей в него какую нибудь болванку или пустой прямоугольник с dash border

ну класс создай типа empty-container и залей в него какую нибудь болванку или пустой прямоугольник с dash border

не совсем понял

так то исходный объект, который перетаскивают не оставляют на месте

так то исходный объект, который перетаскивают не оставляют на месте

мне создать 2 элемента в шаблоне или как?

вопрос не понял

у тебя есть контейнер в котором лежит исходная картинка

как только ты ее перемещаешь, измени вид контейнера, который теперь пустой

а картинка полупрозрачная перемещается

а картинка полупрозрачная перемещается

так а если там текст будет? или svg? вставлять клон?

ну я ж не знаю какая у тебя задача

я не заказчик :))

я не заказчик :))

ладно) покручу еще)

Друзья, кто-то знаком с ngnix?

Друзья, кто-то знаком с ngnix?

Ага, норм технолоджи можно юзать )

Ага, норм технолоджи можно юзать )

Угу. У меня проблем в стэке digital ocean + godaddy + ngnix. При заходе на сайт отображается не домен, а айпи. Шо делать?

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

// @/components/Pages/Processes/index.vue <template> ... <component v-bind:is="currentTabComponent" :task="{}" @submited="afterSubmit"></component> или <embeded-form @submited="afterSubmit" /> ... </template> <script> import EmbededForm from '@/components/Common/EmbededForm' ... components: { EmbededForm: () => EmbededForm() // EmbededForm } </script> // @/components/Common/EmbededForm export default function () { return new Promise(async function (resolve, reject) { ... resolve(await getComponent()) }) } В getComponent() происходят запросы к серверу на получение шаблона, переменных и т.д. для формирования примерно такого обьекта: return { template: await getTemplate(), data: () => $data, methods: $methods, props: ['task'] }

И получается что он один раз его получил(исполнил промис), а потом просто монтирует (mounted) и уничтожает (destroyed), но заново промис уже не выполняет. А мне хотелось чтобы он полность переделывал его. Потому что другого способа на лету формировать компонент я не знаю.

ну с виду какой-то пиздец если честно

ну с виду какой-то пиздец если честно

Согласен

components: { EmbededForm: () => import '@/components/Common/EmbededForm' }

это надо делать так как минимум

// @/components/Pages/Processes/index.vue <template> ... <component v-bind:is="currentTabComponent" :task="{}" @submited="afterSubmit"></component> или <embeded-form @submited="afterSubmit" /> ... </template> <script> import EmbededForm from '@/components/Common/EmbededForm' ... components: { EmbededForm: () => EmbededForm() // EmbededForm } </script> // @/components/Common/EmbededForm export default function () { return new Promise(async function (resolve, reject) { ... resolve(await getComponent()) }) } В getComponent() происходят запросы к серверу на получение шаблона, переменных и т.д. для формирования примерно такого обьекта: return { template: await getTemplate(), data: () => $data, methods: $methods, props: ['task'] }

вот этот код я тоже не вкурю никак

зачем ты делаешь async/await там?

Это путь к файлу из которого код

Импорт возвращает тот же промис, поэтому разницы нет

Импорт возвращает тот же промис, поэтому разницы нет

разница есть для webpack

Разница в чем?

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

когда ты делаешь импорт внутри функции как я выше показал, то импорт реальный произойдет только по требованию этого компонента

подгрузится отдельный js модуль

ты попробуй так и так и в закладке Network проверь

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

Я так понимаю что вэб пак уже не при чем. Это сам vue как то кэширует этот компонент и не перезапрашивает его вновь

Я так понимаю что вэб пак уже не при чем. Это сам vue как то кэширует этот компонент и не перезапрашивает его вновь

везде где есть слово import вебпак очень даже при чем

а вот vue как раз сам по себе не хуя не умеет

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

У меня компонент отображает формы из другой системы. Форм конечно много и поэтому когда пытаюсь отобразить другую форму, он мне показываетя ту которая была до этого и новую не перезапрашивает.

и что тебя там не устраивает

а где он ее должен перезапросить?

из какого места?

по какому тригеру?

С сервера по другому id формы

это понятно что с сервера из какого метода?

mounted?

Запрашивает в getComponents

Нет. Это все происходит до mount

я надеюсь ты понимаешь, что импорт физически происходит только один раз

Я отдаю котовый обьект коипонкнта во вью

Понимаю

ты в своем геткомпонентс в консоль что нибудь попробуй вывести

и посчитай сколько раз оно выполнится

Так вот собственно и вопрос.

Конечно пробовал. Он выводит только при первом запросе компонента, после он его не исполняет.

ERROR: S client not available

ну так по коду иэто и видно

вполне ожидаемое поведение

Согласен

перезапрашивай нужные данные в методе mounted компонента

Если Перезапрошу шаблон, как его подставить ы компонент и так чтобы он конечно был реактивным? this.render() или как то так

если ты вот это <component :is="currentTabComponent" :task="{}" @submited="afterSubmit"></component> не обернул в keep-alive то оно будет пересоздаваться каждый раз

не нужно никаких render

просто в компоненте currentTabComponent в методе mounted делай запрос к серверу или если у тебя vuex то экшин вызывай соответствующий

Мне по факту нужно перестроить компонент полностью, свой $data, methods, template, все другое.

В этом и вопрос.

Какие формы открывает компонент?

Если есть другой способ отобразить внешную форму и так чтобы она оставалась реативной и со своими методами. То подскажите как

Формы bpmn движка camunda, если знаком такой.

Есть массив places, который состоит из обьектов, каждый из которых имеет вид: { "services": [ { "id": 2, "name": "Предварительній заказ", "translations": [ { "id": 2, "locale": "ua", "name": "Предварительній заказ" } ] } ] } Как мне отфильтровать весь массив places, оставив только те, у которых, скажем есть services с id =2?

Т.е. с сервера приходит html шаблон с v-model и v-on и всеми плюшками vue

Array.filter(x => x.id === 2)

Array.filter(x => x.id === 2)

Тогда у меня в x будет хранится обьект?

Да

Array.filter(x => x.id === 2)

Тут наверное правильнее будет так: Array.filter(x => x.services.id === 2)

Точнее элемент массива, а что это будет не важно

Да

Но даже это не так, ведь services - тоже массив из N обьектов

Если конкретно то да

Я подсказал идею

Я подсказал идею

Понял, спасибо )

Ок

Ок

Взгляни, если не сложно. Это работать не будет? this.$root.$data.places.filter(place => { if(place[this.filter_type].length > 0) { console.log(place[this.filter_type][0].id == 2); place[this.filter_type][0].id == 2; } })

Взгляни, если не сложно. Это работать не будет? this.$root.$data.places.filter(place => { if(place[this.filter_type].length > 0) { console.log(place[this.filter_type][0].id == 2); place[this.filter_type][0].id == 2; } })

а в чём необходимость лезть в корневой элемент?

Не будет. Тебе в таком случае надо делать обязательно return и все это куда то присваивать. Если можешь сделай скрин, а то разметка поплыла

а в чём необходимость лезть в корневой элемент?

И это тоже вопрос.

а в чём необходимость лезть в корневой элемент?

У меня есть главный компонент, там хранится массив places. Я делаю компонент фильтр, хочу чтобы при клике на него, он лез в массив places родителя и там фильтровал данные

У меня есть главный компонент, там хранится массив places. Я делаю компонент фильтр, хочу чтобы при клике на него, он лез в массив places родителя и там фильтровал данные

не надо лезть к родителю - получи через props и делай чё хошь