3

Tengo la siguiente data:

  data: {
        usuario: {
            nombres: 'name',
            email: 'cor',
            telefono: 'tel',
            fechan: '2018-10-15',
            rol : 3,
            idTarget: 0
        },
        listaUsuarios:{
          0:{
            idTarget: 0,
            nombres: 'name',
            telefono: 'telefono',               
            estado: 0,
            rol : 3,
            email : '',
            fechan: ''

          }
        }

    },

tengo un método en el que a usuario le asigno listausuarios[index], sin embargo cuando edito los inputs cuyo v-model son usuario, TAMBIÉN cambia listausuarios[index] es como si estuvieran entrelazados.

openmodalEditUser: function(idUser, index){
          this.pivotAction = true;
          this.usuario =  this.listaUsuarios[index];
}



<div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Registrar un nuevo usuario.</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <div class="row">
            <div class="col-md-12">
                <div class="md-input">
                  <input class="md-form-control" required="" v-model="usuario.nombres" type="text">
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Nombre:</label>
               </div>
            </div>
            <div class="col-md-12"><br></div>
            <div class="col-md-12">
                <div class="md-input">
                  <input class="md-form-control" required=""  v-model="usuario.email" type="text">
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Correo:</label>
               </div>
            </div>
            <div class="col-md-12"><br></div>
            <div class="col-md-12">
                <div class="md-input">
                  <input class="md-form-control" required=""  v-model="usuario.telefono" type="text">
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label>Teléfono:</label>
               </div>
            </div>
            <div class="col-md-12"><br></div>
            <div class="col-md-12">
                <div class="md-input">
                  <input class="md-form-control" required="" v-model="usuario.fechan" type="date">
                  <span class="highlight"></span>
                  <span class="bar"></span>
                  <label class="labels-no-anim">Fecha Nacimiento:</label>
               </div>
            </div>

yo solo quiero que cuando ejecute dicho método usuarios me tome el usuario de la lista que le digo, pero no al reves ni en ambas direcciones. y más aun, entender porque occure esto.

Es decir, el problema es que al hacer

 this.usuario =  this.listaUsuarios[index];

Si modifico this.usuario también se modifica listaUsuarios[index]

1 respuesta 1

4

Aca esta todo tu problema: this.usuario = this.listaUsuarios[index];

Aca le estas diciendo que usuario es lo mismo que "el usuario" que esta en esa posicion en la lista.

Y de ahi, se deduce que son el mismo "objeto" (porque en js no hay objetos).

Lo que deberias hacer es copiar el objeto que esta ahi contenido.

Una forma sencilla seria:

let this.usuario = Object.assign({}, this.listaUsuarios[index]);

Pero hay otras formas de copiar tambien.

Ademas, cuando lo haces de esta forma, el objeto es reactivo.

3
  • ohhh wow! eso no lo sabia, pensé que al decirle " = " era como cualquier variable que ahora toma un valor, muchas gracias !! el 18 oct. 2018 a las 17:46
  • Si. con variables si.. pero con objetos es otra cosa. @AndressBlend. En realidad los objetos son punteros al objeto. Entonces cuando igualas, igualas punteros, pero apuntan al mismo objeto. Te recomendaria que leas un poco sobre teoria de objetos si no lo tenes tan claro.
    – gbianchi
    el 18 oct. 2018 a las 17:47
  • Ah !!! si la verdad si te comprendí, Muchas gracias nuevamente por tomarte la molestia de explicarme! el 18 oct. 2018 a las 17:51

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.