Copy an object so that it is another instance than the original one

Question

Copy an object so that it is another instance than the original one

Navigation

#1 by (4 votes)

3

I have the following 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: ''

          }
        }

    },

I have a method in which the user assigned listausuarios[index] , however when I edit inputs whose v-model are user, ALSO change listausuarios[index] is as if they were intertwined.

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>

I just want that when you run this method users I take the user from the list that I say, but not the reverse or both directions. and even more, understand why this happens.

That is, the problem is that when doing

 this.usuario =  this.listaUsuarios[index];

If I change this.usuario , listaUsuarios[index] is also modified

javascript vue.js

asked by Andress Blend 18.10.2018 в 19:36

source

1 answer

'key' in dict vs. dict.get ('key') Help with PHP array

score 4 · Accepted Answer

Here's your problem: this.usuario = this.listaUsuarios[index];

Here you are saying that user is the same as "the user" who is in that position in the list.

And from there, it follows that they are the same "object" (because in js there are no objects).

What you should do is copy the object that is contained there.

A simple way would be:

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

But there are other ways to copy too.

Also, when you do it this way, the object is reactive.