ciclo for per visualizzare i dati

Cristiano Magro

2024-12-27 6ea2a289bf1344fbf016013f9461ec9d4b46ec84

ciclo for per visualizzare i dati

 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");

 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>