VueJs

VueJS és a twig
Ahhoz hogy a Vue megéledjen a Twig templétekben, át kell állítani az alapértelmezett delimitert, így nem fog összeakadni a twig kiíratás és a Vue.

Klasszikus probléma, hogy a Vue nem "lát" a gyökér #app html elemen kívül, nem aggatja rá az eventListenereit a gombokra. Ez akkor tud kényelmetlen lenni ha KIFU stílusban a Mentés gomb a footer blokkba kerül, az app meg a main-be. Erre megoldás ez a kis hack:


Lássuk miért jó a VueJS
Data változó szerkeszthető kiíratása:


messageType szerkesztő:

Itt most statikus a lista, de mehet simán AJAX végpontból is, mivel az adattárban van mint tömb, egyéb UI eseményeken keresztül végtelenül egyszerű a kezelése.
Pl. valahol kiválasztasz egy appot ahol a warning opció nem játszik, simán kiveszed a tömbből.
Összetett UI-nál ez hatalmas segítség lehet, hogy nem kell a jQueryvel újrarazolgatni a selectet, csak a forrás adatot frissíteni.

Egyszerű kiiratás a data-ból: messsage: ${message}
messageType: ${messageType}

Feltételes kiíratás, ha az üzenet nem üres, messageType-al lehet a hátteret állítani:
${message}
Itt megint az összetett UI a lényeg, egy sima v-if-et beraksz és kész, nem kell classokat billegtetni, nem kell aggódni hogy esetleg a d-none-on belül az inputok elküldésre kerülnek.

Mintaadat betöltő gomb:
|

Alkalmazások darabszáma: ${applications.length}

Név Darabszám Státusz
${app.name} ${app.count} ${app.status}