I am currently working on building a contact-list app using Vue.js. Each contact in the list can have multiple addresses, emails, and phone numbers. To accommodate this, I have set up inputs and a button to add additional fields as needed.
My issue arises after hitting the submit button. I aim to have only one input per type (email, number, address) and clear its content, but instead of clearing individual inputs it is wiping all the data I have entered. I attempted to separate the functions for each input type, but that did not resolve the problem.
To provide clarity, here's a screenshot:
https://i.stack.imgur.com/uyPdV.png
this.$emit is responsible for passing the data. The section below that (in the green box) clears the inputs.
Below is the code snippet:
onSubmit() {
let numberValidation = this.numbers.map(el => el.value === "");
let addressValidation = this.addresses.map(el => el.value === "");
let emailsValidation = this.emails.map(el => el.value === "");
let len =
numberValidation.length +
addressValidation.length +
emailsValidation.length;
for (let i = 0; i < len; i++) {
if (
numberValidation[i] === true ||
addressValidation[i] === true ||
emailsValidation[i] === true ||
this.title.trim() === ""
) {
return this.$alert("you have an empty space");
break;
}
}
const newContact = [
{
name: this.title,
number: this.numbers,
address: this.addresses,
email: this.emails
}
];
this.$emit("newcontact", newContact);
this.title = "";
this.numbers.length = this.addresses.length = this.emails.length = 1;
this.numbers[0].value = this.addresses[0].value = this.emails[0].value =
"";
}