Dilema variabila JS

Limbaje de Programare JavaScript / Node
1

Am o pagina cu un tabel ce contine useri, fiecare user are butonul “editeaza” de unde pot sa-i schimb numele. La apasarea butonului apelez o functie unde variabila form ii dau valorile userului.

<el-button type="success" round size="mini" @click="handleShowDialog(scope.row)">Editează</el-button>

scope.row = datele userului.

Si un functia apelata este ceva de genul:

handleShowDialog(row)
{
    this.form = row;
}

Imi apare form-ul unde sa bag datele, dar problema e ca daca introduc acolo ceva (fara sa apas enter, doar scriu), mi se schimba automat si cu datele din tabel (folosesc vue JS), adica nu ar trebui sa se schimbe doar datele din form?

E ceva de genul:
let mere = 1;
let pere = 2;

pere = mere; (variabila pere are acum valoarea: 1)

Si daca fac: pere = 2. (si mere si pere au valoarea: 2)

2

Tu practic modifici row-ul in situatia data, din cauza asta ti se editeaza si in Form si in Table cand modifici datele.

Eu cam asa am facut prin aplicatii:

function Form (firstname, lastname, ...) {
    this.firstname = firstname;
    this.lastname = lastname;
    ...
}

//methods
editPerson: function (index) {
    this.form = Object.assign({},
        new Form(
            this.persons[index].firstname,
            this.persons[index].lastname,
            ...
        )
    );
}
3 Likes
3

Multumesc pt interes, am rezolvat prin alta metoda, trimit un axios sa-mi returneze datele corect, anyway… merge f bine!

Problema e alta… Dupa ce modific, datele din tabel ramane la fel, folosesc SET-URI din mapMutations, dar nu functioneaza…

export const setMember = (state, payload) => { state.member = payload };

Unde aveam this.form = row am pus this.setMember(row);

Am testat, datele modificate vin bine, dar nu se modifica si in tabel…

export const saveMember = ({ commit }, payload) => {
    return axios.post('/api/list/save-member', payload)
        .then((response) => {
            commit('setMember',response.data.member);
            return Promise.resolve(response.data)
        }).catch((error) => {
            console.log(error.response);
            return Promise.resolve(error.response)
        })
};

Am facut debug, datele modificate se trimite bine, in consola n-am niciun fel de eroare.
Poate nu am dat multe detalii, daca ai idee sau imi spui care e principiu pe care merg set-urile astea…
Merci anticipat.