Handling unexpected side effect in computed properties - VueJS

vue/no-side-effects-in-computed-properties
vue.js computed
how to call computed property vue
vue computed object
vue lifecycle computed
vue computed with parameter
update computed property vue
watch a computed property vue

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

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

Unexpected side effect in computed property, .sort mutates the original array. To avoid it, clone the array before sorting it. .slice​() is 1 of the simplest way to clone array. Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.

ESLint is showing this error because you are mutating the original data in computed property. It is recommended that you should return new references or data from computed property.Follow this link for detailed explanation. https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/no-side-effects-in-computed-properties.md

Computed Side Effects in Vue.js, In Vue computed properties are a life saver when it comes to being able but we need to be careful unintended side-effects that can come with  This rule is aimed at preventing the code which makes side effects in computed properties. It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.

I would advice you to move allKeys array to computed and get rid of unnecessary tableHeaders and getKeys:

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

I'm not sure you need to assign this.selected = tableHeaders[0] since the first option will be chosen by default automatically.

How to avoid vue/no-side-effects-in-computed-properties, in computed, i update data property like below. data () { return { endTimeFeedBack: '' } }, computed: { endTimeState () { something else… this. Unexpected side effect in "computedName" computed property #427. Closed Unexpected side effect in "foo" computed property.

vue/no-side-effects-in-computed-properties, vue/no-side-effects-in-computed-properties. disallow side effects in computed properties. ⚙️ This rule is included in all of "plugin:vue/vue3-  You can data-bind to computed properties in templates just like a normal property. Vue is aware that vm.b depends on vm.a, so it will update any bindings that depends on vm.b when vm.a changes. And the best part is that we’ve created this dependency relationship declaratively: the computed getter function is pure and has no side effects

Handling unexpected side effect in computed properties, Handling unexpected side effect in computed properties - VueJS. vue/no-side-​effects-in-computed-properties vuejs computed vue computed object how to call​  Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

Unexpected side effect in computed properties, Vue.js is probably one of the most enjoyable Javascript libraries to work with. It has an intuitive 1 - Side effects inside computed properties. Computed This is a rather simple example which results in unexpected behavior. Let's look at It's up to the *Dropdown *how to handle the option selection and close the menu. michalsnik changed the title New rule proposition: `no-side-effects-in-computed-properties` Rule proposition: `no-side-effects-in-computed-properties` Jul 9, 2017 Copy link Quote reply Collaborator

Comments
  • You should not edit other data in computed, you should use watch instead
  • So do you mean that I should write the getkeys in watch?