Всем привет. Такой вопрос, я пытаюсь динамически загружать иконки в

Question

Всем привет. Такой вопрос, я пытаюсь динамически загружать иконки в

component is таким образом, однако если пропс меняется динамически - иконка не меняется и компутед не отрабатывает на изменение пропса. Почему? Просто через () => import() делать ругается vite, а в проде вообще так свг не тянет

#frontend #javascript #programming #russian #vue.js

0

19.10.2023

7 ответов

9 просмотров

Виталик Автор вопроса

Artyom Tuchkov
1. не нужно класть glob в ref, он резолвится во вр...

Спасибо. Пункт 1 поправлю, абсолютно верное замечание. По пункту 2 сам дошел до этого, да. Работает ожидаемо. Однако очень бесит что иконки как бы "дергаются" при изменении пропса. Как будто пропадают, освобождают место в контейнере и потом появляются

0

8 месяцев назад

Artyom Tuchkov

Виталик
Спасибо. Пункт 1 поправлю, абсолютно верное замеча...

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

0

8 месяцев назад

Виталик Автор вопроса

Artyom Tuchkov
смотря как ты их обновляешь, можно сначала асинхро...

не очень понял если честно, что именно имеется ввиду. Обернуть defuneAsyncComponent в async await? потому что сам по себе defineAsyncComponent Promise то не возвращает

0

8 месяцев назад

Виталик Автор вопроса

Artyom Tuchkov
смотря как ты их обновляешь, можно сначала асинхро...

при такой реализации дерганье остается, по крайней мере

0

8 месяцев назад

Artyom Tuchkov

Виталик
при такой реализации дерганье остается, по крайней...

если ты используешь defineAsyncComponent, то он начнет подгружать иконку уже после смены компонента, отсюда и дерганье нужно либо ему фоллбэк задавать на какой-нибудь спиннер https://vuejs.org/guide/components/async.html#loading-and-error-states, либо просто не использовать его и ждать промис самостоятельно, а потом пихать готовый компонент в переменную, тогда она обновится сразу же

0

8 месяцев назад

Виталик Автор вопроса

Artyom Tuchkov
если ты используешь defineAsyncComponent, то он на...

ура, вот конечный код компонента. по итогу компонент нельзя класть в реф, его надо класть в shallowRef, чтобы избежать траблов с перформансом чтобы пути резолвились правильно и на проде и локально юза/ витовский glob такая реализация без варнингов и дерганий динамически меняет и загружает свг еще раз спасибо!

0

8 месяцев назад

Artyom Tuchkov · Accepted Answer

1. не нужно класть glob в ref, он резолвится во время билда и больше не меняется 2. потому что ты юзаешь пропс не внутри computed, а внутри возвращаемой функции, лучше это переписать на вотчер с явной зависимостью в виде props.name, тогда все будет работать, как и ожидаешь

169 похожих чатов

Всем привет. Такой вопрос, я пытаюсь динамически загружать иконки в

7 ответов

Похожие вопросы