I am facing a challenge while working on the code below. I am attempting to utilize the getTranslation object to match values from the originalKeys array and then add these values to a new array called allKeys.
However, ESLint has flagged an error stating,
Unexpected side effect in "getkeys" computed property.I have attempted moving the getkeys function to methods, but it seems impractical to call a method every time for translation. How can I resolve this issue?
<template>
<select v-model="selected">
<option v-for="key in getkeys" v-bind:key="key"> {{ key }}</option
</select>
</template>
data(){
return{
selected: '',
allKeys: [],
originalKeys: [], //e.g. ["ALPHA_MIKE]
getTranslation: {} //e.g. {"ALPHA_MIKE": "ALPHA MIKE"}
}
},
computed: {
getkeys(){
let tableHeaders = [];
for( var i=0; i<this.originalKeys.length; i++){
let translation = this.getTranslation[this.originalKeys[i]];
tableHeaders.push(translation);
}
this.selected = tableHeaders[0]; //unexpected side effect here
this.allKeys = tableHeaders; //unexpected side effect here.
return this.allKeys;
}
}