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