Primjer u vue.js za poziv i prikaz rezultata iz php skripte

Nije se imalo vremena, ali nine da nisam malo cesce pomislio na ovaj forum.vidjet cemo koliko cu se sad zadrzati. :grinning::grinning::grinning::grinning:

I sad dečki, jedno grdno pitanje i molba: može primjer neke web aplikacije koju ste napravili koristeći vue, da vidim u praksi? Nije bitna ljepota, već da vidim kak to u praksi radi?

Nazalost tu ti ja ne mogu pomoci, nemamo nista u produkciji sa VueJSom

Npr. ovi dropdown menii su vue app, faceted search

1 Like


Imam jos nekih stvari na GitHubu, baci pogled.

Takodjer i ovdje sam dao fin doprinos, mada postoji jos dosta internih aplikacija koje su dostupne samo customer-ima https://gotti.ch/en/

1 Like

Ovo mi je btw koristan alatić, koji je međuostalim moj prvi vue attempt, a i prvi put sam tu korisio i entity framwork za upravljanje bazom, tako da ako poželiš koristiti alatić, možda će biti malkoc spor xd.
Nije baš spicanjen, jer je nastao nabrzaka. Ali još par sitnica dok odradim, služit će svrsi. :slight_smile:

http://blogger.sekom-apps.com/Logs/Index/rXXHhF6fio34PmWzR19rcMJIxJcGwV

Ono što je tu vue…
… pa prikaz logova ide kroz vue, ali to nećeš vidjeti ukoliko nećeš logirati neke svoje podatke.
Ali zato ova forma koja ti se prikaže kada klikneš “filter” gore lijevo, ona je hendlana sa vue.

U suštini, kada dodaš novi atribut dolje kod “Add new search attributes:” , taj attribut se ubaci u data.attributes i prikaz forme se automatski prilagođava. Čaroljom :smiley:
A cijela sintaksa zaslužna za to se nalazi direktno u HTMLu i leži u liniji
<tr v-for="(item,key) in attributes" v-if="item.visible || item.applied">

…koju možeš vidjeti na page-source.

Dio
v-if="item.visible || item.applied"

…omogućava da polje za pretraživanje “filter attributes” može napraviti nevidljivim samo ona polja koja nisu “applied”. (To su polja koja nisu aktivirana, tj. nije im upaljen checkbox sa lijeve strane).

Što ti je još fora, ti sa vue imaš two-way data binding…što će reći da ja nigdje ne moram očitavati vrijednost tog checkbox-a koji je vezan uz svaki item forme. Pa ne moram “ručno” pratiti stanje checkbox.a da bi koregirao jeli taj item.applied = true ili false. To se kroz vue automatski poveže i kako se mijenja stanje checkbox-a, tako se automatski mijenja i vrijednost item.applied. To je postignuto linijom:

<input type="checkbox" class='sTitle' data-content='If checked, this attribute is aplied to search' v-model='item.applied'>

…ključ je u ovome v-model='item.applied'
…što ti u prvu ruku postavi vrijednost checkboxa prema početnoj vrijednosti item.applied, a kasnije kako se mijenja checkbox tako ga u svakom momentu prati i vrijednost item.applied.

Isto možeš i sa text input poljima složiti …pa ti item.value uvijek prati vrijednost koja stoji u text input polju.
Baci pogled kako je cijela forma povezana preko raznih v-modela sa itemima.

Iz toga proizlazi da sve promjene na formi su automatski i promjene na tvojim podacima, a tebe u konačnici zanima upravo to. Koje vrijednosti su na tvojim podacima.

Suma sumaru,
čarolija je u tome da ti vue omogućava da kreiraš logičku vezu između tvojih podataka i view-a koji prikazuje te podatke. Tako onda kada ti kasnije mijenjaš svoje podatke, znaš da će to view pravilno pratiti…a ne da moraš razmišljati:

  • Aham, što ću morati sa prikazom raditi ako neki podatak izbacim ili dodam u listu
  • Što ću morati raditi sa nekom ikonicom u viewu, ako neki podatak prelazi iz stanja “none-checked” -> “checked”
  • Kako ću takve promjene statusa nekih itema pratiti sa odgovarajućim css klasama
  • Što ću morati raditi sa prikazom ako se u nekom momentu desi da mi je lista itema prazna koju view prikazuje
  • itd. itd.

Sve su to situacije koje sa vue pokriješ doslovice sa jednostavnom HTML sintaksom, i onda prikaz veselo i automatski prati stanje nad tvojim podacima. Ti mijenjaš podatke, a sa view-o. kojeg si inicijalno definirao, više nemaš nikakve zezancije.
Zaista čarobno!

1 Like