Vue + Naja + Nette Snippet (snippet redraw)

emololftw

Dobrý den,

omlouvám se, ale otázka je spíše pro frontend.
Nemá někdo zkušenost s frameworkem Vue.js (v3.2.40) v nette. Mám modal okno, kde je dynamický obsah. Pokaždé když modal otevírám, redrawnu ho pomocí $this->redrawControl("modalContent") do té doby se Vue instance vytvoří a vše funguje jak má. Ale překreslení snippetu reinicializuje obsah snippetu a vue komponenta zmizí. Nevíte někdo jak Vue komponentu v překresleném snippetu znovu zobrazit?

Vue konfigurace:

export default {
  components: {
    CopyPasteDiv,
    SearchBlock,
    VisualisationCalculateInterval,
  },
  created() {
    naja.addEventListener("success", (v) => {
      this.$forceUpdate()
    })
  },
}

Děkuji

PS: Vue mount() element se samozřejmě nad celým snippetem:

<div id="app">
	...
		...
			<div n:snippet="modalContent">
				... <VueKomponenta />
			</div>
</div>

emololftw

Toto řešení mě dohnalo na jednom projektu, vrátil jsem se k tomu a tady je rešení:

let snippetInstances = {}

naja.snippetHandler.addEventListener('beforeUpdate', (event) => {
    const id = event.detail.snippet.id;
    let instance = snippetInstances[id] ?? null;
    if (instance) {
        instance.unmount();
    }
})

naja.snippetHandler.addEventListener('afterUpdate', (event) => {
    const el = event.detail.snippet;
    let instance = createMyApp(el.id);
    snippetInstances[el.id] = instance;
    instance.mount(el);
})

fce createMyApp je alias k nativní createApp z vue

Kcko

Ahoj,
jen ze zajímavosti, jak přesně Vue v souvislosti s Nette používáš?

emololftw

Kcko napsal(a):

Ahoj,
jen ze zajímavosti, jak přesně Vue v souvislosti s Nette používáš?

@Kcko

Ahoj momentálně mám třeba ajaxový formulář, který kompletně vč. validace vytvářím pomocí nette/forms. Z toho důvodu mám modal (ve vue) a v něm dynamický obsah. Na tento modal mám mnoho akcí navěštěných jako třeba notifikace, zavření modalu díky onSuccess eventu. Ve většině komponent se dotazuji na backend api a tam vracím z Nette $this->sendJson(). V nette je většina kódu aplikace (výpočet faktorů pro které je aplikace vytvořena apod). Sáhl jsem po vue kvůli asynchronnímu načítání komponent. Náš dashboard pracuje někdy s opravdu ohromným počtem dat + grafická vizualizace a zprvu jsem to řešil pomocí dynamických snippetů, ale často jsem řešil problém třeba automatického zavírání dropdownu když byl uvnitř snippetu tak jsem pak dělal různé tricky řešení. Ve vue mi v tom pomůže reaktivita a vstupní data. Latte používám dál na základní kostru a malé komponenty. Velké datagridy a náročné komponenty řeším pomocí Vue. (Na latte nedám dopustit). Klidně PM: klima@noxem.cz a můžu sdělit ještě některé detaily.

Editoval emololftw (16. 2. 13:36)

Kcko

emololftw napsal(a):

Kcko napsal(a):

Ahoj,
jen ze zajímavosti, jak přesně Vue v souvislosti s Nette používáš?

@Kcko

Ahoj momentálně mám třeba ajaxový formulář, který kompletně vč. validace vytvářím pomocí nette/forms. Z toho důvodu mám modal (ve vue) a v něm dynamický obsah. Na tento modal mám mnoho akcí navěštěných jako třeba notifikace, zavření modalu díky onSuccess eventu. Ve většině komponent se dotazuji na backend api a tam vracím z Nette $this->sendJson(). V nette je většina kódu aplikace (výpočet faktorů pro které je aplikace vytvořena apod). Sáhl jsem po vue kvůli asynchronnímu načítání komponent. Náš dashboard pracuje někdy s opravdu ohromným počtem dat + grafická vizualizace a zprvu jsem to řešil pomocí dynamických snippetů, ale často jsem řešil problém třeba automatického zavírání dropdownu když byl uvnitř snippetu tak jsem pak dělal různé tricky řešení. Ve vue mi v tom pomůže reaktivita a vstupní data. Latte používám dál na základní kostru a malé komponenty. Velké datagridy a náročné komponenty řeším pomocí Vue. (Na latte nedám dopustit). Klidně PM: klima@noxem.cz a můžu sdělit ještě některé detaily.

Ahoj, díky

cesta mít Nette jako BE s API a ve Vue mít napsaný FE, to mi dává smysl.
Myslel jsem, pokud jsem to špatně (a rychle :/) nepřečetl, že máš nějaký hybrid.

My ho třeba tak máme, já mohu používat v Nette klasický způsob komponent a presenterů a zároveň si v jiném root adresáři mohu vytvořit klasickou Vue komponentu a vložit si ji do Latté a funguje. Je to šílený hybrid :-), proto mě zajímalo jestli to máš/máte nějak podobně nebo jak jsem psal na začátku což mi dává větší smysl BE=Nette, FE=Vue

My jsme se proto rozhodli, neb jsme zatím nenašli cestu ani chuť přepisovat celé CMS, máme celé adminko automatické a velmi provávazné a psát to ve Vue, to už budu pomalu v důchodu.

Díky za info.