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

• 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.

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 assignment is to display the pictures only, when they are liked. 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 status of the dish, but no image of it.

1. Take your result from the previous assignment and safe it lu05.s17.html
2. Add a <div>-tag just before the <img> for the v-if. Make shure that the image-tag is within the if-statement.
   1. The output is in that case of OK: I like …
   2. close the div
3. Execute your script. If everything was done properly you will receive a message what you like, in red letters AND the image of the dish.
4. Add a second <div> for the v-else
   1. The output is in that case of OK: I don't like
   2. In that case there is no image to display!!!
   3. close the div
5. Execute your script. If everything was done properly you will receive a message what you don't like, in green letters, but without the image of it.

Source code of the solution

Volkan Demir