workaround prop immutable

Cristiano Magro

2024-12-28 7b062dd850df16c29aec4496882fc8e751ad5bac

workaround prop immutable

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

@@ -1,8 +1,12 @@
<template>
    <li>
        <h2>{{ name }}</h2>
        <h2>{{ name }} {{ friendIsFavorite === "1" ? '(Favorite)' : '' }}</h2>
        <button @click="toggleDetails">
            {{ detailsAreVisible ? 'Hide' : 'Show' }} Details
        </button>

        <button @click="toggleFavorite">
            Toggle favorite
        </button>
        <ul v-if="detailsAreVisible">
            <li><strong>Phone:</strong> {{ phoneNumber }}</li>
@@ -17,6 +21,7 @@
        'name',
        'phoneNumber',
        'emailAddress',
        'isFavorite'
    ],
    data() {
        return {
@@ -26,13 +31,21 @@
                name: "Manuel Lorenz",
                phone: "01234 5678 991",
                email: "manuel@localhost.com",
            }
            },
            friendIsFavorite: this.isFavorite,
        }
    },
    methods: {
        toggleDetails() {
            this.detailsAreVisible = !this.detailsAreVisible;
        },
        toggleFavorite() {
            if (this.friendIsFavorite === '1') {
                this.friendIsFavorite = '0';
            } else {
                this.friendIsFavorite = '1';
            }
        },
    },
};
</script>