Co si sbalit

Čas na projekt! Tento miniprojekt využije první čtyři lekce: refy, události, podmínky, seznamy a třídy. Stejně jako v miniprojektech kurzu JavaScriptu pokyny říkají, co má stránka dělat, a jak to napíšete, je na vás. Každé cvičení pokračuje tam, kde skončilo to předchozí.

Projekt. Jedete na víkend na hory a chystáte si seznam věcí na výlet. Ve třech cvičeních ukážete, co si vzít, a kliknutím to zabalíte, potom spočítáte, co už je v batohu, a nakonec zabalené věci skryjete a ty, které nebudete potřebovat, ze seznamu odeberete.

Data. V App.vue je ref veci s polem, ve kterém je pro každou věc objekt: její id, nazev a zabaleno, které říká, jestli už je v batohu:

{ id: 1, nazev: "Stan", zabaleno: false }

Šablona má nadpis a prázdný seznam (ul) a ve style.css je třída zabaleno, která věc přeškrtne.

Úkol. Ukažte každou věc z veci v seznamu jako li s jejím názvem a každému li dejte klíč. Každá věc dostane i tlačítko: Zabalit, dokud zabalená není, a Vybalit, když už je. Kliknutí na něj věc zabalí, nebo ji zase vybalí, a li zabalené věci má třídu zabaleno.

Tip: obsluha události může dostat věc jako argument a změnit ji: vec.zabaleno = !vec.zabaleno. Věc je jeden z objektů v poli refu, takže Vue změnu uvidí a stránku aktualizuje.