JS.VUE.RETURN.IN.COMPUTED.PROPERTY

Enforce that a return statement is present in computed property

Rule Details

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

{'vue/return-in-computed-property': ['error']}

Copy

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

{'vue/return-in-computed-property': ['error']}

Copy

<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

Copy

{
  "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`

{'vue/return-in-computed-property': ['error', { treatUndefinedAsUnspecified: false }]}

Copy

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