no-ref-as-operand.md

Pattern: Use of ref as operand

Issue: -

Description

This rule reports cases where a ref is used incorrectly as an operand.
You must use .value to access the ref value.

<script>
import { ref } from 'vue'

export default {
  setup () {
    const count = ref(0)
    const ok = ref(true)

    /* ✓ GOOD */
    count.value++
    count.value + 1
    1 + count.value
    var msg = ok.value ? 'yes' : 'no'

    /* ✗ BAD */
    count++
    count + 1
    1 + count
    var msg = ok ? 'yes' : 'no'

    return {
      count
    }
  }
}
</script>

Further Reading

• eslint-plugin-vue - no-ref-as-operand
• Guide - Reactivity - Reactivity Fundamentals / Creating Standalone Reactive Values as refs
• Vue RFCs - 0013-composition-api