LU05.S16 - v-for with 2-dimensional arrays

• Download the file and copy the content into the code area of the W3School on the left hand side of the coding window.
• You can execute the code by pressing the run button
• The result will be presented in the right hand side of the window.

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 leads to having to have handle two or more arrays in our source code.

1. Click on the link above with the source and save it with the appropriate name in your W3School workspace.
2. Change within the v-for the x to z.
3. Execute your script –> The images will will disappear. Why?
4. Then change x within the <figcaption> and the <img> from x to a z as well –> The images will appear again. Why?
5. Note down for what the first respectively the second usage of x/z stands for.

It can happen, that besides the image, we also want to display the description of our products on our website. Thus we want to handle a multi-dimensional array.

1. Add a column comm-column with comments to your food-list (array) in the script part.
   • If you like it: OK.
   • If not: NOK
2. Display the comm-entries after the name of the dish by using z.comm
3. Execute your script. If everything was done properly you will see the images as before AND the comment below the images.
4. Comment your script accordingly an save it.

Source code of the solution

Volkan Demir