Sometimes, we want to fix the ‘Unexpected side effect in “getkeys” computed property.’ ESLint error in Vue.js.

In this article, we’ll look at how to fix the ‘Unexpected side effect in “getkeys” computed property.’ ESLint error in Vue.js.

How to fix the ‘Unexpected side effect in “getkeys” computed property.’ ESLint error in Vue.js?

To fix the ‘Unexpected side effect in “getkeys” computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.

For instance, we write

<script>
//...

export default {
  //...
  computed: {
    getkeys() {
      return this.originalKeys.map((k) => this.getTranslation(k));
    },
  },
  //...
};
</script>

to return an array that we created by call this.orginalKeys.map with a callback that returns the value from this.getTranslation with entry k in getKeys.

We didn’t change any reactive property values in the getKeys method.

Conclusion

To fix the ‘Unexpected side effect in “getkeys” computed property.’ ESLint error in Vue.js, we should make sure we don’t modify reactive properties in computed properties.