thomas

TP4/EX0/my-list.riot

@@ -0,0 +1,22 @@
+<my-list>
+    <ul>
+        <li each="{ char in props.personnages }" onclick="{ () => onSelect(char) }">
+            { char.prenom } { char.nom } ({ char.age !== null ? char.age : 'âge inconnu' })
+        </li>
+    </ul>
+
+    <style>
+        ul { list-style: none; padding: 0; }
+        li { padding: 10px; border-bottom: 1px solid #eee; cursor: pointer; }
+        li:hover { background-color: #f0f0f0; }
+    </style>
+
+    <script>
+        export default {
+            onSelect(character) {
+                // Émet un événement 'select' vers le parent avec le personnage sélectionné
+                this.parent.selectCharacter(character);
+            }
+        }
+    </script>
+</my-list>