Как отрендерить нативный WebComponent внутри приложения, смонтированного на Vue ТОЛЬКО ОДИН РАЗ
Я создал собственный веб-компонент (CampusList), который будет запрашивать сервер.
Поскольку я помещаю его в элемент, установленный Vue, Vue будет createElement этого веб-компонента во второй раз.
Поскольку этому компоненту потребуются данные с сервера, он отправит один и тот же запрос дважды!
Конечно, не должно, что мне делать?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Предполагая, что вы хотите, чтобы выборка выполнялась только один раз (даже если у вас есть несколько экземпляров элемента на странице), вы можете объявить переменную внутри импорта пользовательского элемента, но вне определения, и проверить ее перед извлечением. Таким образом, выборка будет происходить только при первой встрече, например:
let fetchMade = false;
class CampusList extends HTMLElement {
connectedCallback() {
if (!fetchMade) {
console.info('fetch!');
fetchMade = true;
} else {
console.info('do not fetch');
}
}
}
customElements.define('campus-list', CampusList);
Поэтому мне нужно делать это несколько раз во многих классах? Лично я думаю, что это не так просто / ясно
Не отображайте содержимое внутри
CampusList. Создал все ваши элементы (в DIV или что-то еще), а затем в конце сделайтеCampusList.replaceWith(div)