LU05.A17 - v-for with 2-dimensional-arrays and v-if

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

1. Displying an multidimensional array using v-for and v-if

This is the result of the previous assignment. Copy + paste the content to your W3School-Workingspace.

Source code of the solution

After successfully being able to manage 2-dimensional-arrays with the v-for directive, it is time to take next challenge: the combined usage of v-for and v-if.

Though the assigment is to dispay the pictures only, when they are likes. For that we need to check the status, it they are OK we display the image of the dish, if they are NOK we simply give out the name and the statu of the dish, but no image of it.

1. Download the provided Vue-Script and copy-paste it to your W3School-workspace.
2. Save it with a suitable name e.g. LU05.s17
3. Right after the image-tag add a first div container with
   • v-if statement that checks the status OK
   • area with the text I love and the name of the dish
   • Mind the colour-change of the text to red
   • closing div
4. Execute the the script and proceed only when your script works properly.
5. Create a second div container with
   • v-else
   • area with the text I don't like and the name of the dish
   • mind the color change of the text to green
   • closing div

Lösung

Volkan Demir