Handling unexpected side effect in computed properties - VueJS
As my above comment, you should not edit other data in computed
property, you should use watch
instead
computed: {
getkeys(){
let tableHeaders = [];
for( var i=0; i<this.originalKeys.length; i++){
let translation = this.getTranslation[this.originalKeys[i]];
tableHeaders.push(translation);
}
return tableHeaders;
}
},
watch: {
getkeys: {
deep: true,
handler: function (newVal) {
this.selected = newVal[0]
this.allKeys = newVal
}
}
}
As other answers mentioned this is because you are mutating the original data in a computed property. You should use a method to do this part of the job.
methods:{
changes(tableHeaders){
this.selected = tableHeaders[0];
this.allKeys = tableHeaders;
}
},
computed:{
getkeys(){
// Your code...
this.changes(tableHeaders);
}
},
data: function(){
return{
// Your data...
}
}