return-in-computed-property.md

pageClass	sidebarDepth	title	description	since
rule-details	0	vue/return-in-computed-property	enforce that a return statement is present in computed property	v3.7.0

vue/return-in-computed-property

enforce that a return statement is present in computed property

• ⚙️ This rule is included in all of "plugin:vue/vue3-essential", "plugin:vue/essential", "plugin:vue/vue3-strongly-recommended", "plugin:vue/strongly-recommended", "plugin:vue/vue3-recommended" and "plugin:vue/recommended".

📖 Rule Details

This rule enforces that a return statement is present in computed properties and functions.

<script>
export default {
  computed: {
    /* ✓ GOOD */
    foo () {
      if (this.bar) {
        return this.baz
      } else {
        return this.baf
      }
    },
    bar: function () {
      return false
    },
    /* ✗ BAD */
    baz () {
      if (this.baf) {
        return this.baf
      }
    },
    baf: function () {}
  }
}
</script>

<script>
import {computed} from 'vue'
export default {
  setup() {
    const foobar = useFoobar()

    /* ✓ GOOD */
    const foo = computed(() => {
      if (foobar.bar) {
        return foobar.baz
      } else {
        return foobar.baf
      }
    })
    const bar = computed(() => false)

    /* ✗ BAD */
    const baz = computed(() => {
      if (foobar.baf) {
        return foobar.baf
      }
    })
    const baf = computed(() => {})
  }
}
</script>

🔧 Options

{
  "vue/return-in-computed-property": ["error", {
    "treatUndefinedAsUnspecified": true
  }]
}

This rule has an object option:

• "treatUndefinedAsUnspecified": true (default) disallows implicitly returning undefined with a return statement.

treatUndefinedAsUnspecified: false

<script>
export default {
  computed: {
    /* ✓ GOOD */
    foo () {
      if (this.bar) {
        return undefined
      } else {
        return
      }
    },
    bar: function () {
      return
    },
    /* ✗ BAD */
    baz () {
      if (this.baf) {
        return this.baf
      }
    },
    baf: function () {}
  }
}
</script>

🚀 Version

This rule was introduced in eslint-plugin-vue v3.7.0

🔍 Implementation

• Rule source
• Test source