I have a form that is emitting and passing data back and forth between components. Currently, when user updates a value in an input field, a new array element is created and added to the form results. How can I only update the array element's properties and NOT create a new array element?
For example, if you edit the following fields in this form, it will add a brand new array element. I just want it to update the name and iso6393Char3Code properties:
[
{
"P_uniqueID": 16858,
"name": "Badakhshān",
"iso6393Char3Code": "fas"
},
{
"P_uniqueID": 16859,
"name": "Badakhshān",
"iso6393Char3Code": "pus"
}
]
What is exactly happening is this:
[
{
"P_uniqueID": 16858,
"name": "Badakhshānsss",
"iso6393Char3Code": "fas"
},
{
"P_uniqueID": 16859,
"name": "Badakhshān",
"iso6393Char3Code": "pus"
},
{
"P_uniqueID": 16858,
"name": "Badakhshānsss",
"iso6393Char3Code": "fas"
},
{
"P_uniqueID": 16858,
"name": "Badakhshānsss",
"iso6393Char3Code": "fas"
},
{
"P_uniqueID": 16858,
"name": "Badakhshānsss",
"iso6393Char3Code": "fas"
}
]
Codesandbox is here: https://codesandbox.io/s/interesting-haze-f7kl4?file=/src/components/ISOAdminDivForm.vue
You have to assign the values of the object instead of pushing to array when the object is already in array.
language(x) {
// this.formValues.push(x);
let el = this.formValues.find((e) => e.P_uniqueID === x.P_uniqueID);
if (el) {
Object.assign(el, x);
} else {
this.formValues.push(x);
}
this.$emit("languages", this.formValues);
}
Working codesandbox