Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
| en:modul:m291:learningunits:lu05:loesungen:17 [2025/03/22 09:15] – angelegt vdemir | en:modul:m291:learningunits:lu05:loesungen:17 [2025/03/28 12:12] (aktuell) – vdemir | ||
|---|---|---|---|
| Zeile 1: | Zeile 1: | ||
| - | ====== LU05.S16 - v-for with 2-dimensional arrays and v-if ===== | + | ====== LU05.S17 - v-for with 2-dimensional arrays and v-if ===== |
| ===== Hints ==== | ===== Hints ==== | ||
| Zeile 5: | Zeile 5: | ||
| * You can execute the code by pressing the //run// button | * You can execute the code by pressing the //run// button | ||
| * The result will be presented in the right hand side of the window. | * The result will be presented in the right hand side of the window. | ||
| + | |||
| + | ===== Assignment | ||
| + | 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. | ||
| + | |||
| + | - Take your result from the previous assignment and safe it **lu05.s17.html** | ||
| + | - Add a < | ||
| + | - The output is in that case of **OK**: <color # | ||
| + | - close the div | ||
| + | - 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. | ||
| + | - Add a second <div> for the **v-else** | ||
| + | - The output is in that case of **OK**: <color # | ||
| + | - In that case there is no image to display!!! | ||
| + | - close the div | ||
| + | - 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 ===== | ===== Source code ===== | ||
| - | {{ : | + | {{ : |
| - | {{: | + | {{: |