'Vue : avoid two data variables synchronization
I have a sticky problem with vue app.
In my methods I need to duplicate temporally a data variable:
this.El_selected = this.dessign[index].rows[key].element
Then, whenever I make a change in "El_selected", the change is also made in "dessign", which is not what I need.
I tried to use an intermediate local variable with the same results.
let el_temp = null;
el_temp = this.dessign[index].rows[key].element
this.El_selected = el_temp
Even , I tried split in two different methods, but did not succeed.
EDIT (as Creative Learner request. thank you): The data element:
data() {
return {
dessign : [],
eSelected : [0,0],
elements : [],
is_selected : false,
open : false,
category : null,
categories_options : [],
El_selected : null,
Op_selected : { oscilobatiente : null, mano : null, maneta : null}
};
},
The method code:
setId(index,key){
let el_temp = null;
this.eSelected = [index,key]
this.category = this.Op_selected = null
el_temp = this.dessign[index].rows[key].element
this.El_selected = el_temp
this.Op_selected = {
oscilobatiente : this.El_selected.oscilobatiente,
mano : this.El_selected.mano,
maneta : this.El_selected.maneta
}
this.El_selected.oscilobatiente = this.El_selected.oscilobatiente != null ? 1 : 0;
this.El_selected.mano = this.El_selected.mano != null ? 1 : 0;
this.El_selected.maneta = this.El_selected.maneta != null ? 1 : 0;
},
The last three lines change the value in "dessign". (Checked with VueDevTools)
EDIT 2 ::
the method is called from Button that toggle a sidebar
<b-button
v-b-toggle.sidebar-right
variant="default"
@click="setId(index,key)"
>
<feather-icon icon="PlusSquareIcon" size= 24 />
</b-button>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
