Tengo un formulario que emite y pasa datos de un lado a otro entre los componentes. Actualmente, cuando el usuario actualiza un valor en un campo de entrada, se crea un nuevo elemento de matriz y se agrega a los resultados del formulario. ¿Cómo puedo actualizar solo las propiedades del elemento de matriz y NO crear un nuevo elemento de matriz?
Por ejemplo, si edita los siguientes campos en este formulario, agregará un nuevo elemento de matriz. Solo quiero que actualice el name y las propiedades iso6393Char3Code :
[ { "P_uniqueID": 16858, "name": "Badakhshān", "iso6393Char3Code": "fas" }, { "P_uniqueID": 16859, "name": "Badakhshān", "iso6393Char3Code": "pus" } ]Lo que está pasando exactamente es esto:
[ { "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 está aquí: https://codesandbox.io/s/interesting-haze-f7kl4?file=/src/components/ISOAdminDivForm.vue
Debe asignar los valores del objeto en lugar de empujar a la matriz cuando el objeto ya está en la matriz.
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); }