separazione template

Cristiano Magro

2024-12-27 c56b01f76d3544495473a2931400fd5e8eb5efaf

 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;