Vue JS Todo List π
Π£ΡΠ»ΠΎΠ²Π½Π°Ρ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠ° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
Π‘Π½Π°ΡΠ°Π»Π° ΠΏΡΠΎΠ²Π΅ΡΠΈΠΌ - Π΅ΡΡΡ Π»ΠΈ Π·Π°Π΄Π°ΡΠΈ?
ΠΡΠΈ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡΡ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΈΠ· localStorage.
ΠΠ΅ΡΠΎΠ΄Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΌΠ°ΡΡΠΈΠ²Π°ΠΌΠΈ, Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ.
Π Π°Π±ΠΎΡΠ°Π΅ΠΌ Ρ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠΌ ΠΎΠ±ΡΠ΅ΠΊΡΠΎΠ².
ΠΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π»ΠΈ Π°ΡΡΠΈΠ±ΡΡΡ data-bs-toggle ΠΈ id. ΠΡΠΈΠΊΡΡΡΠΈΠ»ΠΈ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ Π½Π° Π΄Π°ΡΡ ΠΈ Π²ΡΠ΅ΠΌΡ.
ΠΡΡΠΈΡΠ»ΡΠ΅ΠΌΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ»Π΅ΠΆΠ΅Π½ΠΈΠ΅.
Π‘ΠΎΠ·Π΄Π°Π»ΠΈ computed ΡΠ²ΠΎΠΉΡΡΠ²Π° activeTasks ΠΈ completedTasks.
ΠΡΠΈ ΠΎΡΠΌΠ΅ΡΠΊΠ΅ ΠΎ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠΈ ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅ΠΊΡΠΈΡΠΌΠΈ.
ΠΠΎΠΈΡΠΊ ΡΠ΅ΡΠ΅Π· Π²ΡΡΠΈΡΠ»ΡΠ΅ΠΌΠΎΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ.
Π‘ΠΎΠ·Π΄Π°Π»ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ searchText ΠΈ ΠΏΡΠΈΠ²ΡΠ·Π°Π»ΠΈ ΠΊ ΠΏΠΎΠ»Ρ Π²Π²ΠΎΠ΄Π° ΡΠ΅ΡΠ΅Π· v-model.
Π’Π΅ΠΏΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ filteredTasks ΠΈ ΠΈΡ ΡΠΆΠ΅ Π³ΡΡΠΏΠΏΠΈΡΡΠ΅ΠΌ.
Π Π΅ΡΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΠ»ΠΎΠ²Π½ΠΎΠΉ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ.
Π Π΅ΡΠ»ΠΈ Π·Π°Π΄Π°ΡΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π΅ΡΡΡ, Π½ΠΎ ΠΏΠΎ Π·Π°ΠΏΡΠΎΡΡ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ?
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΡΡΠΎ ΠΏΠΎΠ½ΡΠ», Π½Π°Π΄ΠΎ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ.