Към този момент имаме вече напълно работещ компонент и сме готови да добавим множество ToDoItem компоненти към нашето приложение. В този урок ще разгледаме добавянето на набор от данни за елемента todo към App.vue компонента, които след това ще изведем вътре в ToDoItem компонентите, използвайки v-for директивата.
Рендериране на списъци с v-for
За да имаме ефективен и функицонален списък със задачи, трябва в него да можем да изобразяваме множество задачи. За целта Vue има специална директива v-for. Това е вградена директива, която ни позволява да изпълним цикъл в нашия шаблон, повтаряйки изобразяването на шаблона за всеки елемент в масива. Ще използваме това, за да преминем през масива от задачи и да ги покажем в нашето приложение в отделни ToDoItem компоненти.
Добавяне на данни за рендиране
Първо трябва да имаме масив съдържащ нашите задачи. За целта ще добавим data свойство към App.vue компонента, съдържащо ToDoItems поле, чиято стойност ще е масив от todo елементи. Макар че в крайна сметка ще добавим механизъм за добавяне на нови задачи, сега за начало можем да започнем с някакъв макет съдържащ нужните ни елементи. Всяка задача ще представлява обект със name и done свойство.
Да добавим няколко примерни задачи като тези, показани по-долу. По този начин ще имаме на разположение данни, които да рендираме с директивата v-for.
Сега, когато вече имаме списък с елементи, можем да използваме v-for директивата за да ги покажем. Директивите се прилагат към елементи по начин както и при другите атрибути. В случая v-for използва специален синтаксис, подобен на for…in цикъла в JavaScript – v-for=“item in items” – където items е масивът, който искаме да итерираме, и item е препратка към текущия елемент в масива.
Директивата v-for се прикачва към елемента, който искате да повторите, и изобразява този елемент и неговите дъщерни елементи. В този случай искаме да покажем <li> елемент за всеки един обект в нашия масив ToDoItems. След това ще искаме да предадем данните от всеки елемент на ToDoItem компонента.
Ключов атрибут
Преди да направим това, има още една част от синтаксиса, която трябва да се знае, при която се използва v-for key атрибутът. За да може Vue да оптимизира изобразяването на елементите в списъка, той се опитва да хване елементите, така че да не трябва да ги пресъздава всеки път, когато в списъкът настъпи някаква промяна. Vue обаче се нуждае от помощ за тази работа. За да е сигурен, че използва повторно елементите на списъка по подходящ начин, той се нуждае от уникален „ключ“ за всеки елемент, към който е прикачена v-for директивата.
За да сме сигурни, че Vue може точно да сравнява key атрибутите, те трябва да бъдат от типа “низ” или да бъдат числови стойности. Макар че би било чудесно да се използва полето за име, това поле в крайна сметка ще бъде контролирано от входните данни въведени от потребителя, което означава, че по този начин не можем да гарантираме, че имената ще бъдат уникални. Можем обаче да използваме lodash.uniqueid() както направихме в предишният урок.
- Импортирайте lodash.uniqueid в компонента App по същия начин, както го направихме ипри ToDoItem компонента, използвайки
import uniqueId from ‘lodash.uniqueid’; - След това добавете id поле към всеки елемент във вашия ToDoItems масив и присвойте на всеки от тях стойност от uniqueId(‘todo-‘).
Съдържанието на App.vue <script> елементите ви сега трябва да изглежда така:
Сега добавете v-for директивата и key атрибута към <li> елемента във вашия App.vue шаблон:
Когато направите тази промяна, всеки JavaScript израз между <li> елементите ще има достъп до item стойността в допълнение към другите атрибути на компонента. Това означава, че можем да предадем полетата на обектите на ToDoItem елементите на нашия компонент – просто не забравяйте да използвате v-bind синтаксиса. Това е наистина полезно, тъй като искаме нашите todo елементи да показват label свойствата си като свои етикет, а не като статичен (My Todo Item). Освен това искаме състоянието им да е проверено и да отразява техните done свойства, а не винаги да бъде зададено на done=“false“.
Актуализирайте label=“My ToDo Item” атрибута на :label=“item.label“ и :done=“false” атрибута на :done=“item.done“, както се вижда в контекста по-долу:
Сега, когато погледнете вашето работещо приложение, то ще покаже елементите на todo с техните собствени имена и ако проверите изходния код, ще видите, че всички входове имат уникални id, взети от обекта в App компонента.
Възможност за лек рефакторинг
Вместо да генерираме id за отметките в ToDoItem компонента, можем да превърнем това id свойство. Въпреки че това не е необходимо, може да ни улесни в управлението, тъй като така или иначе вече трябва да създадем уникален id за всеки един елемент.
- Добавете ново prop – id – към компонента ToDoItem.
- Направете го да бъде “задължително” и неговия тип дa е String.
- За да предотвратите сблъсъци на имена, премахнете id от вашия data атрибут.
- Вече не използваме uniqueId, така че ще трябва да премахнем import uniqueId from ‘lodash.uniqueid’;, в противен случай ще се изведе грешка.
Сега <script> елемента на ToDoItem компонента трябва да изглежда така:
Сега във App.vue компонента задайте item.id като prop на ToDoItem компонента. Вашият App.vue шаблон сега трябва да изглежда така:
Сега като разгледате сайта, той трябва да изглежда по същия начин както и преди рефакторинга, но сега id се взема от данните вътре App.vue и се предава към ToDoItem като prop, както е и всичко останало, така че нещата вече са по-логични и последователни.
Обобщение
Вече имаме примерни данни и цикъл, който взема всеки бит данни и ги изобразява в ToDoItem в нашето приложение.
Това, от което наистина се нуждаем от тук нататък, е възможността да позволим на нашите потребители да въвеждат свои собствени задачи в приложението и за това ще ни е необходим HTML елемента <input>, събитие, което да се задейства при подаване на данните, метод, който да се задейства при изпращане за да се добавят данните и накрая начин за изобразяване на списъка и модел за контрол на данните. Ще разгледаме как се прави това в следващият урок.