nativescript-Vue - Adding an object to a push array after zeroing the object adds a zeroed object

Question

I am developing an app with nativescript-Vue where I have an address registration. I have the following data:

        data() {
            return {
                isRegistering: true,
                enderecos: [{
                    id: 1,
                    descricao: 'Casa',
                    logradouro: 'Rua da minha casa',
                    numero: '123',
                    complemento: 'Apartamento 123 Bloco A',
                    bairro: 'Jardim Minha Casa',
                    cidade: 'Casa',
                    cep: '17200000'
                },{
                    id: 2,
                    descricao: 'Trabalho',
                    logradouro: 'Rua do meu Trabalho',
                    numero: '123',
                    complemento: "Dena Code S/A",
                    bairro: 'Jardim Trabalho',
                    cidade: 'Trabalho',
                    cep: '17200000'
                }],
                formEndereco: {
                    id: 0,
                    descricao: '',
                    logradouro: '',
                    numero: '',
                    complemento: '',
                    bairro: '',
                    cidade: '',
                    cep: '',
                }
            }
        },

When the user clicks on the Save button insert my formEndereco in the Addresses array:

salvarEndereco() {
    this.enderecos.push(this.formEndereco);     
    this.limparFormEndereco();
},
limparFormEndereco() {
    this.formEndereco.id = 0;
    this.formEndereco.descricao = '';
    this.formEndereco.logradouro = '';
    this.formEndereco.numero = '';
    this.formEndereco.complemento = '';
    this.formEndereco.bairro = '';
    this.formEndereco.cep = '';
},

Here comes the problem that’s breaking my balls. If in the save methodEndereco I just call the function "this.enderecos.push(this.formEndereco)", the address is entered normally, but when I add the method "cleanFormEndereco" then the empty form is inserted. I have tried to make push an asynchronous function, that horrible gambit of adding a time out in the cleaning function so that it gives time to push but nothing has solved so far. Any hint of what I may not have learned about the behavior of Ve or nativescript?

This is my first question on the channel, excuse me if something is very wrong.

Answer 1

Hi, from what I understand of javascript what is happening is that your array enderecos is receiving a memory reference from your variable formEndereco which means that if you modify the variable formEndereco your array enderecos will save is the modification and not previous value.

The solution I see to that is to modify your function in this way:

BEFORE:

salvarEndereco() {
    this.enderecos.push(this.formEndereco);     
    this.limparFormEndereco();
}

AFTER 1:

salvarEndereco() {
    this.enderecos.push(...this.formEndereco);     
    this.limparFormEndereco();
}

OR THEN 2:

salvarEndereco() {
    const form = this.formEndereco;
    this.enderecos.push(form);     
    this.limparFormEndereco();
}

If I couldn’t help you with any of the solutions above, Google it:

Copy object and typescript references - Google

Other solutions