0

Tengo un problema con Vue js: Trato de hacer algo así como una lista de notas. Tengo un array de json donde se guardaran todas las notas y un json donde se guarda la nota que la persona quiere crear. Pero el problema es:
Luego de hacer un push a el array de json se agrega perfectamente pero luego al modificar el valor en el json se modifica automáticamente el array de json.
No puedo modificar el json sin que me modifique el valor en el array.
PD: el método que hace el push se activa cuando hago click a un button
Dejaré aquí el código mas relevante, si necesitan mas información con mucho gusto la brindare.

el: '#app',
    data: {
        hasError: 0,
        typeError: '',
        noteSelected: null,
        note: {
            title: '',
            content: '',
            tags: [],
            tagsString: ''
        },
        notes: [{
            title: 'titulo de una nota',
            content: 'contenido de una nota',
            tags: ['nota', 'contenido'],
            tagsString: ''
        }]
    },
   methods:{
      newNote: function() {
            if (this.validate() === true && this.noteSelected === null) {
                this.addTags();
                this.noteSelected = this.note;
                this.notes.push(noteSelected);
            }
        },
}

1 respuesta 1

1

El asunto no es con Vue.js, es con Javascript.

En Javascript (y otros lenguajes) sucede algo curioso: los argumentos de tipo complejo son pasados por referencia y los primitivos por valor. Los arreglos clave -> valor en Javascript (siendo objetos/JSON) son de tipo complejos, por ende, sus valores se pasan como referencia. (Referencia al indice en memoria).

¿Que tiene que ver esto con tu problema?

Todo.

Entonces ¿Por que sucede esto?

Al que copiar el valor de this.note a this.noteSelected con una igualdad (this.noteSelected = this.note) y luego haciendo un array.push() al objeto this.notes no se pasa el valor de un objeto a otro si no una referencia al indice de memoria donde esta dicho valor. Al intentar modificar el valor en alguno de estos se modifica el valor en el espacio en memoria y por eso se ve como si se modificase en ambos arrays.

Blablabla ¿y la solución es?

Puedes utilizar un pequeño "hack" para obtener el valor y no la referencia del objeto convirtiéndolo en un String con JSON.stringify() y luego de nuevo a un objeto json con JSON.parse() (JSON.parse(JSON.stringify(JSON)))

En tu caso quedaría así:

newNote: function() {
  if (this.validate() === true && this.noteSelected === null) {
    this.addTags();
    this.noteSelected = JSON.parse(JSON.stringify(this.note)); // <- Aquí el cambio: 
    this.notes.push(noteSelected);
  }
},

Otra solución, si tienes una instancia de jQuery sería utilizar la función jQuery.extend() lo cual sería casi igual, solo que la linea en cuestión quedaría asi: this.noteSelected = jQuery.extend({}, this.note);

Aquí dejo un link al jsbin reproduciendo el "fenómeno" que ocurre https://jsbin.com/yiwuvuruzi/edit?js,console

No es complejo de entender, tiene su lógica aunque es algo confuso. Espero que resuelva tu problema, y mas aun, que aclare tu confusión.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.