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 +++++++++++++++++++++++++++-
1 files changed, 27 insertions(+), 1 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;
--
Gitblit v1.8.0