en:modul:m291:learningunits:lu05:aufgaben:16

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
en:modul:m291:learningunits:lu05:aufgaben:16 [2025/03/21 16:48] – vdemiren:modul:m291:learningunits:lu05:aufgaben:16 [2025/03/28 12:02] (aktuell) – vdemir
Zeile 1: Zeile 1:
-====== LU05.A16 - v-for list rendering with index ======+====== LU05.A16 - v-for list with 2-dimensional arrays ======
  
 ===== Prerequisites  ===== ===== Prerequisites  =====
Zeile 5: Zeile 5:
   * Means of aid: only teaching materials, no websearch, no use of ai.   * Means of aid: only teaching materials, no websearch, no use of ai.
   * Timeframe: 20 Minutes   * Timeframe: 20 Minutes
-  * Expected result: A Vue script that uses he v-for directive+  * Expected result: A Vue script that uses the v-for directive
  
 ===== Learning objectives ===== ===== Learning objectives =====
   - Be able to explain the objective of v-for   - Be able to explain the objective of v-for
-  - Displying the ndex and corresponding array entry using v-for. +  - Display the index and corresponding array entry using v-for. 
-  - Dispalying array elements and the corresponding images with v-for.+  - Display array elements and the corresponding images with v-for.
  
 ===== Source ===== ===== Source =====
-[[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-for_foodText | v-for code-example]]+[[https://www.w3schools.com/vue/tryit.php?filename=tryvue_v-for_foodImgs2 | v-for code-example]]
  
 ===== Assignment 1 ====== ===== Assignment 1 ======
-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. +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. 
  
-  - Go to the link to the task mentioned in the source and save it with the appropriate name in your W3School workspace. +  - Click on the link above with the source and save it with the appropriate name in your W3School workspace. 
-  - Change the first x to z and observe what happens.  +  - Change within the **v-for** the **x** to **z**.  
-  - Execute your script.  --> The images will will disappear. +  - Execute your script  --> The images will will disappear. Why? 
-  - Than change the second x to a z --> The images will appear again. +  - Then change **x** within the //<figcaption>// and the //<img>// from **x** to a **z** as well --> The images will appear again. Why? 
-  - Note down, for what the first respectivelyand the second usage of x stands for. +  - Note down for what the first respectively the second usage of **x/z** stands for. 
  
 ===== Assignment 2 ===== ===== Assignment 2 =====
-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. +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//. 
- +
-  - E.g.: Multidimensional arrays are manages as follows: **manyBeaches: [{name: 'Sunset', url: './public/beach1.jpg', stat: 'Nice'}, ... ]** +
-  - Name the already existing entries: **img** +
-  - 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. +
-  - Add a <figure>-tag just after the div tag, and resettle the v-for in it. The end of the  +
-  - Execute your script. If everthing was done properly you will see the images as before. +
-  - Now add a comment-column to you food-list (array). If you like it: **OK**. If not: **NOK** +
-  - Display the comment with a figcaption-tag by using **z.comm** within a double bracket **{{}}**.  +
-  - Execute your script. If everthing was done properly you will see the images as before AND the comment below the image. +
-  - Comment you script accordingly an save it.+
  
 +  - Add a column **comm**-column with comments to your food-list (array) in the script part. 
 +    * If you like it: **OK**. 
 +    * If not: **NOK**
 +  - Display the comm-entries after the name of the dish by using **z.comm**
 +  - Execute your script. If everything was done properly you will see the images as before AND the comment below the images.
 +  - Comment your script accordingly an save it.
    
- 
 ===== Solution ===== ===== Solution =====
 [[en:modul:m291:learningunits:lu05:loesungen:16|Lösung]] [[en:modul:m291:learningunits:lu05:loesungen:16|Lösung]]
- 
  
  
 ===== Vocabulary ===== ===== Vocabulary =====
 ^ English ^ German ^  ^ English ^ German ^ 
-| bulb | Glühbirne |+| ... | ... |
  
  
  • en/modul/m291/learningunits/lu05/aufgaben/16.1742572118.txt.gz
  • Zuletzt geändert: 2025/03/21 16:48
  • von vdemir