delete contact

Cristiano Magro

2024-12-29 1630a97e508f8fa2c43693eb8adfdd2412004821

delete contact

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

@@ -12,7 +12,10 @@
        :phone-number="friend.phone" 
        :email-address="friend.email" 
        :is-favorite="friend.isFavorite"
        @toggle-favorite="toggleFavoriteStatus"></friend-contact>
        @toggle-favorite="toggleFavoriteStatus"
        @delete="deleteContact" 
        >
      </friend-contact>
    </ul>
  </section>
</template>
@@ -59,7 +62,12 @@
      };

      this.friends.push(newFriendContact);
    }
    },
    deleteContact (friendId){
        this.friends = this.friends.filter(
          (friend) => friend.id != friendId
        );
    },

  }
};

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

@@ -12,6 +12,7 @@
            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
            <li><strong>Email:</strong> {{ emailAddress }}</li>
        </ul>
        <button @click="$emit('delete', id)">Delete</button>
    </li>
</template>

@@ -49,7 +50,7 @@
            // }
        },
    },
    emits:['toggle-favorite'],
    emits:['toggle-favorite', 'delete'],
    // emits: {
    //     'toggle-favorite': function (id) {
    //         if (id) {
@@ -71,6 +72,9 @@
        toggleFavorite() {
            this.$emit('toggle-favorite', this.id);
        },
        // deleteFriend(){
        //     this.$emit('delete', this.id);
        // }
    },
};
</script>