Gestion des effets secondaires inattendus dans les propriétés calculées - VueJS

Question

Dans le code suivant, j'essaie d'utiliser l'objet getTranslation pour mapper les valeurs présentes dans le tableau originalKeys et pousser les valeurs dans un nouveau tableau allKeys.

Mais ESLint me donne cette erreur, Unexpected side effect in "getkeys" computed property.

J'ai essayé de déplacer la fonction getkeys vers les méthodes, mais je pense que cela n'a pas de sens d'appeler une méthode à chaque fois pour faire la traduction. Comment puis-je résoudre ce problème?

<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;
    }
}

Answer 1

Je vous conseillerais de déplacer le tableau allKeys en calcul et de vous débarrasser des tableHeaders et getKeys inutiles:

<template>
    <select v-model="selected">
    <option v-for="key in allKeys" v-bind:key="key"> {{ key }}</option
    </select>
</template>

data(){
    return{
    selected: '',
    originalKeys: [],  //e.g. ["ALPHA_MIKE]
    getTranslation: {} //e.g. {"ALPHA_MIKE": "ALPHA MIKE"}
    }
},
computed: {
    allkeys() {
        return this.originalKeys.map(key => this.getTranslation[key])
    }
}

Je ne suis pas sûr que vous ayez besoin d'assigner this.selected = tableHeaders[0] puisque la première option sera choisie par défaut automatiquement.