VueJS2 : Push items into array and only update if property has changed-CodePudding

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

CodePudding user response：

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