binding dei dati in un ciclo for

Cristiano Magro

2024-12-28 c4371db9541bc6463d58193f9a60542e35cc3204

binding dei dati in un ciclo for

 07 - development setup/vue-cli-01-a-new-vue-project/src/App.vue

@@ -5,15 +5,12 @@
    </header>
    <ul>
      <friend-contact 
      name="Manuel Lorenz" 
      phone-number="123" 
      email-address="cicio@ciccio.it"
      is-favorite="1"
      ></friend-contact>
      <friend-contact
      name="Jeany Torpedo" 
      phone-number="123123" 
      email-address="torpedo@ciccio.it"
      v-for="friend in friends"
      :key="friend.id"
      :name="friend.name" 
      :phone-number="friend.phone" 
      :email-address="friend.email"
      :is-favorite="true"
      ></friend-contact>
    </ul>
  </section>

 07 - development setup/vue-cli-01-a-new-vue-project/src/components/FriendContact.vue

@@ -1,6 +1,6 @@
<template>
    <li>
        <h2>{{ name }} {{ friendIsFavorite === "1" ? '(Favorite)' : '' }}</h2>
        <h2>{{ name }} {{ friendIsFavorite ? '(Favorite)' : '' }}</h2>
        <button @click="toggleDetails">
            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
        </button>
@@ -37,24 +37,18 @@
            required: true
        },
        isFavorite: {
            title: String,
            title: Boolean,
            required: false,
            default: '0',
            validator: function (value) {
                return value === '1' || value === '0';
            }
            default: false,
            // validator: function (value) {
            //     return value === '1' || value === '0';
            // }
        },
    },

    data() {
        return {
            detailsAreVisible: false,
            friend: {
                id: "manuel",
                name: "Manuel Lorenz",
                phone: "01234 5678 991",
                email: "manuel@localhost.com",
            },
            friendIsFavorite: this.isFavorite,
        }
    },
@@ -63,11 +57,7 @@
            this.detailsAreVisible = !this.detailsAreVisible;
        },
        toggleFavorite() {
            if (this.friendIsFavorite === '1') {
                this.friendIsFavorite = '0';
            } else {
                this.friendIsFavorite = '1';
            }
            this.friendIsFavorite = !this.friendIsFavorite;
        },
    },
};