VueJS - data changes when I change const variable

Question

I have a participants variable for b-form-select and I want to set disabled = true to option if option selected one of the other 2 selectboxes. Totally I have 3 selectboxes.

When I change the par variable, VueJS changes to participants variable. What's the problem?

acceptorsOptions(item){
    let par = this.participants;
    return par.map(participant => {
        let refusers = item.refusers.filter(refuser => refuser === participant.value);
        let abstentions = item.abstentions.filter(abstention => abstention === participant.value);
        if( refusers.length > 0 || abstentions.length > 0 )
            participant.disabled = true;
        return participant;
    });
},
refusersOptions(item){
    let par = this.participants;
    return par.map(participant => {
        let acceptors = item.acceptors.filter(acceptor => acceptor === participant.value);
        let abstentions = item.abstentions.filter(abstention => abstention === participant.value);
        if( acceptors.length > 0 || abstentions.length > 0 )
            participant.disabled = true;
        return participant;
    });
},
abstentionsOptions(item){
    let par = this.participants;
    return par.map(participant => {
        let refusers = item.refusers.filter(refuser => refuser === participant.value);
        let acceptors = item.acceptors.filter(acceptor => acceptor === participant.value);
        if( refusers.length > 0 || acceptors.length > 0 )
            participant.disabled = true;
        return participant;
    });
},

Possible duplicate of [How do I correctly clone a JavaScript object?](https://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) — Dexygen, Dec 25 '19 at 13:14

score 0 · Accepted Answer · answered Dec 25 '19 at 13:15

Your problem is because of using this.participants for every variable.

So you can solve your problem simply by cloning this.participants like this:

let par = JSON.parse(JSON.stringify(this.participants));

You can read more about that: here and here.

That will solve your problem.

VueJS - data changes when I change const variable

1 Answers1