esercizio step 3

Cristiano Magro

2024-12-30 ff5308ea297afc7cfe89049f58842a2a3a9c94cf

esercizio step 3

 07 - development setup/cmp-communication-assignment-problem/src/App.vue

@@ -5,7 +5,7 @@
            Esercizio
        </header>
        <active-user :username="user.username" :age="user.age"></active-user>
        <user-data></user-data>
        <user-data @update-user="updateUser"></user-data>
    </section>
</template>

@@ -18,6 +18,12 @@
                age: "38",
            }
        }
    },
    methods:{
        updateUser(user, age){
            this.user.username = user;
            this.user.age = age;
        }
    }
}
</script>

 07 - development setup/cmp-communication-assignment-problem/src/components/ActiveUser.vue

@@ -10,11 +10,11 @@
    props: {
        username: {
            title: String,
            required: true
            required: true,
        },
        age: {
            title: String,
            required: true
            required: true,
        },
    }
}

 07 - development setup/cmp-communication-assignment-problem/src/components/UserData.vue

@@ -1,16 +1,39 @@
<template>
    <form @submit.prevent="submitData">
    <div>
        <label>Utente: </label>
        <input type="text">
        <input type="text" v-model="username">
    </div>
    <div>
        <label>Eta: </label>
        <input type="text">
        <input type="text" v-model="age">
    </div>
    <div>
        <button>Update</button>
    </div>
</form>
</template>

<script>
export default {
    data(){
        return {
            username: "",
            age: "",
        }
    },
    emits: ['update-user'],
    methods:{
        submitData() {

            if(this.username !== "" && this.age !== ""){

            this.$emit('update-user', this.username, this.age);
            } else {
                alert("insert data")
            } 

        }
    }
}
</script>