From c56b01f76d3544495473a2931400fd5e8eb5efaf Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Fri, 27 Dec 2024 22:05:38 +0100
Subject: [PATCH] separazione template
---
06 - introducing components/xno-cmp-intro-01-starting-setup/app.js | 28 +++++++++++++++++++++++++++-
06 - introducing components/xno-cmp-intro-01-starting-setup/index.html | 12 +-----------
2 files changed, 28 insertions(+), 12 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 d6bb4d2..02950cf 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,7 +1,6 @@
const app = Vue.createApp({
data() {
return {
- detailsAreVisible: false,
friends: [
{
id: "manuel",
@@ -20,6 +19,33 @@
},
computed: {},
watch: {},
+ methods: {},
+});
+
+app.component("friend-contact", {
+ template: `
+ <li>
+ <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>
+ `,
+ data() {
+ return {
+ detailsAreVisible: false ,
+ friend : {
+ id: "manuel",
+ name: "Manuel Lorenz",
+ phone: "01234 5678 991",
+ email: "manuel@localhost.com",
+ }
+ };
+ },
methods: {
toggleDetails() {
this.detailsAreVisible = !this.detailsAreVisible;
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 41cb569..b79e182 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,17 +18,7 @@
</header>
<section id="app">
<ul>
- <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>
-
+ <friend-contact></friend-contact>
</ul>
</section>
</body>
--
Gitblit v1.8.0