LU05.A16 - v-for list with 2-dimensional arrays

• Work type: Individual
• Means of aid: only teaching materials, no websearch, no use of ai.
• Timeframe: 20 Minutes
• Expected result: A Vue script that uses the 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. Change the first x to z and observe what happens.
3. Execute your script. –> The images will will disappear.
4. Than change the second x to a z –> The images will appear again.
5. Note down, for what the first respectively the second usage of x stands for.

It can happen, that besides the image, we also want to display the description of our products on our website. That means, that it is time for some elbow grease. We want to handle a multi-dimensional array. Have fun with the challenge. For more information consult the following link multi-dimensional arrays

1. As we just changed the dimension of our array, we need to adjust the call in the v-for-part from z to z.img.
2. Execute your script. If everything was done properly you will see the content as before.
3. Add a comment-column to you food-list (array). If you like it: OK. If not: NOK
4. Add a <div>-tag just after the <img> tag for the v-if
   1. The output is in the case of OK: I like …
   2. close the div
5. Execute your script. If everything was done properly you will receive a message what you like, in red letters.
6. Add a second <div> for the v-else
   1. The output is in the case of OK: I don't like
   2. close the div
7. Execute your script. If everything was done properly you will receive a message what you don't like, in green letters.

x

1. Execute your script. If everthing was done properly you will see the images as before AND the comment below the image.
2. Do the same with the names of the dishes.
3. Execute your script. If everthing was done properly you will see the images as before, the status, but now also the names of the dishes.
4. Comment you script accordingly an save it.

Hint: Multidimensional arrays are manages as follows:

manyBeaches: [{name: 'Sunset', url: './public/beach1.jpg', stat: 'Nice'}, ... ]

Lösung

Volkan Demir