Handling unexpected side effect in computed properties - VueJS

Question

In the following code, I'm trying to use the getTranslation object to map values present in originalKeys array and push the values in a new array allKeys.

But ESLint is giving me this error, Unexpected side effect in "getkeys" computed property.

I tried shifted the getkeys function to methods, but I think that it does not make sense to call a method everytime to get the translation done. How can I solve 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;     } } 

Answer 1

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