Computed properties that contain state-changing functions trigger vue/no-side-effects-in-computed-properties

[AlbinoDrought]

Tell us about your environment

• ESLint version: 5.16.0
• eslint-plugin-vue version: 4.7.1
• Node version: 9.2.1

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/essential',
    '@vue/airbnb',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-param-reassign': 'off',
    'prefer-destructuring': 'off',
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};

What did you do?

<template>
  <div>
    <div
      v-for="tab in tabs"
      :key="tab.id"
      v-text="tab.text"
      :class="{ active: tab.active }"
      @click.prevent="tab.click"
    />
  </div>
</template>

<script>
export default {
  computed: {
    tabs() {
      return this.groups.map((group, i) => ({
        id: i,
        text: group.name,
        active: i === this.selectedTab,
        click: () => {
          // the below line is underlined, (vue/no-side-effects-in-computed-properties)
          this.selectedTab = i;
        },
      }));
    },
    groups() {
      return this.unfilteredGroups.filter(group => group.visible);
    },
  },

  data() {
    return {
      selectedTab: 0,
      unfilteredGroups: [
        { name: 'foo', visible: true },
        { name: 'bar', visible: true },
        { name: 'foobar', visible: false },
      ],
    };
  },
};
</script>

<style scoped>
.active {
  background-color: black;
  color: white;
  font-size: 18px;
  font-family: 'Comic Sans MS', monospace;
}
</style>

What did you expect to happen?

I expected to get no ESLint errors. In my opinion, this computed property does not have any side-effects - it only returns a value and does not change any state by itself.

What actually happened?

/home/sean/projects/frontend/src/App.vue
  23:11  error  Unexpected side effect in "tabs" computed property  vue/no-side-effects-in-computed-properties

✖ 1 problem (1 error, 0 warnings)

[Webifi]

I'm seeing this as well. Is this expected behavior?

[jacekkarczmarczyk]

Another examples:

computed: {
  fail () {
    return {
      action: () => this.$router.push({}),
    };
  },
  pass1 () {
    return (self => ({
      action: () => self.$router.push({}),
    }))(this);
  }
  pass2 () {
    return {
      action: () => this.$store.dispatch(''),
    };
  }
}

[csicky]

I came here to write exactly this. These functions are not changing the state now, they are part of the returned object. It is confusing for non experienced users which rely on the linter to save them from making mistakes.

One more example:

addViewAction() {
  return {
    label: this.translations.txtGenericNew,
    action: () => {
      this.$refs.confirmDialog.prompt({
        callBack: (value = '') => {
          this.viewsLocal.push({ title: value })
        }
      })
    }
  }
}

To be honest, I only use a computed in this case to pick up the translation, otherwise a simple object would do and there would be no lint error.

[csicky]

I still have this problem today. I have latest version from npm. This is the code:

    validations() {
      return {
        oneOrOther: {
          type: 'oneOrOther',
          message: this.translations.txtDistributorContactValidationPhoneOrEmail,
          validator: () => {
            let valid = isValidEmail(this.operation.value.email) || isValidPhoneNumber(this.operation.value.phone)

            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.$refs.txtEmail.isValid = valid
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            this.$refs.txtPhone.isValid = valid

            return valid
          }
        },
        email: { type: 'email', validator: isValidEmail, message: this.translations.txtValidationEmail }
      }
    }

When will I be able to remove the disabling comment lines?

[ota-meshi]

Hi @csicky.
I cannot reproduce it. Please open a new issue and give me details.

[csicky]

Hi @csicky.
I cannot reproduce it. Please open a new issue and give me details.

You are right :) I just thought I am on latest, but I wasn't actually. All is good, thank you!