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

Question

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

Igor Moraru · Accepted Answer · 2021-11-05 18:54:19Z

1

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

answered Nov 5, 2021 at 18:54

Igor Moraru

7,7591 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related