LU05.A16 - v-for list rendering with index

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 10 Minutes
• Expected result: A Vue script that uses he v-for directive

1. Be able to explain the objective of v-for
2. Displying the ndex and corresponding array entry using v-for.
3. Dispalying array elements and the corresponding images with v-for.

• v-for code-example

It can happen, that we need not only to display the images of our products, but want also to provide additional information to them. That invariably leeds to having to have handle two or more arrays in our source code.

1. Go to the link to the task mentioned in the source and save it with the appropriate name in your W3School workspace.
2. Add a second array called comments with the status of each food:
   • you like it: OK
   • you don't like it: NOK
3. Display the new status to each food within the v-for directive

Lösung

Volkan Demir