48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<template>
|
|
<form @submit.prevent="submitData">
|
|
<div>
|
|
<label>Name: </label>
|
|
<input type="text" v-model="enteredName" />
|
|
</div>
|
|
<div>
|
|
<label>Phone: </label>
|
|
<input type="tel" v-model="enteredPhone" />
|
|
</div>
|
|
<div>
|
|
<label>Email: </label>
|
|
<input type="email" v-model="enteredEmail" />
|
|
</div>
|
|
<div><button>Add Contact</button></div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ["add-contact"],
|
|
data() {
|
|
return {
|
|
enteredName: "",
|
|
enteredPhone: "",
|
|
enteredEmail: "",
|
|
};
|
|
},
|
|
methods: {
|
|
submitData() {
|
|
const person = {
|
|
id: new Date().toISOString(),
|
|
name: this.enteredName,
|
|
phone: this.enteredPhone,
|
|
email: this.enteredEmail,
|
|
isFavorite: false,
|
|
};
|
|
this.$emit(
|
|
"add-contact",
|
|
person
|
|
//this.enteredPhone,
|
|
//this.enteredEmail
|
|
);
|
|
},
|
|
},
|
|
};
|
|
</script>
|