From 6ea2a289bf1344fbf016013f9461ec9d4b46ec84 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Fri, 27 Dec 2024 21:47:57 +0100
Subject: [PATCH] ciclo for per visualizzare i dati

---
 06 - introducing components/xno-cmp-intro-01-starting-setup/app.js     |   24 ++++++++++++++++++++++--
 06 - introducing components/xno-cmp-intro-01-starting-setup/index.html |   23 +++++++++--------------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/06 - introducing components/xno-cmp-intro-01-starting-setup/app.js b/06 - introducing components/xno-cmp-intro-01-starting-setup/app.js
index 286b369..d6bb4d2 100644
--- a/06 - introducing components/xno-cmp-intro-01-starting-setup/app.js
+++ b/06 - introducing components/xno-cmp-intro-01-starting-setup/app.js
@@ -1,10 +1,30 @@
 const app = Vue.createApp({
   data() {
-    return {};
+    return {
+      detailsAreVisible: false,
+      friends: [
+        {
+          id: "manuel",
+          name: "Manuel Lorenz",
+          phone: "01234 5678 991",
+          email: "manuel@localhost.com",
+        },
+        {
+          id: "julie",
+          name: "Julie Jones",
+          phone: "09876 543 221",
+          email: "julie@localhost.com",
+        },
+      ],
+    };
   },
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    toggleDetails() {
+      this.detailsAreVisible = !this.detailsAreVisible;
+    },
+  },
 });
 
 app.mount("#app");
diff --git a/06 - introducing components/xno-cmp-intro-01-starting-setup/index.html b/06 - introducing components/xno-cmp-intro-01-starting-setup/index.html
index e8a1585..41cb569 100644
--- a/06 - introducing components/xno-cmp-intro-01-starting-setup/index.html
+++ b/06 - introducing components/xno-cmp-intro-01-starting-setup/index.html
@@ -18,22 +18,17 @@
     </header>
     <section id="app">
       <ul>
-        <li>
-          <h2>Manuel Lorenz</h2>
-          <button>Show Details</button>
-          <ul>
-            <li><strong>Phone:</strong> 01234 5678 991</li>
-            <li><strong>Email:</strong> manuel@localhost.com</li>
+        <li v-for="friend in friends" key="friend.id">
+          <h2>{{ friend.name }}</h2>
+          <button @click="toggleDetails">
+            {{ detailsAreVisible ? 'Hide' : 'Show'}} Details
+          </button>
+          <ul v-if="detailsAreVisible">
+            <li><strong>Phone:</strong> {{ friend.phone }}</li>
+            <li><strong>Email:</strong> {{ friend.email }}</li>
           </ul>
         </li>
-        <li>
-          <h2>Julie Jones</h2>
-          <button>Show Details</button>
-          <ul>
-            <li><strong>Phone:</strong> 09876 543 221</li>
-            <li><strong>Email:</strong> julie@localhost.com</li>
-          </ul>
-        </li>
+
       </ul>
     </section>
   </body>

--
Gitblit v1.8.0