noVueRefAsOperand (JavaScript)

Language JavaScript (and super languages)

Summary

• Rule available since: v2.4.5
• Diagnostic Category: lint/correctness/noVueRefAsOperand
• This rule is recommended, meaning it is enabled by default.
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• This rule belongs to the following domains:
  • vue
• Sources:
  • Same as vue/no-ref-as-operand

How to configure

biome.json

{
  "linter": {
    "rules": {
      "correctness": {
        "noVueRefAsOperand": "error"
      }
    }
  }
}

Description

Disallow the use of value wrapped by ref()(Composition API) as operand

To access value wrapped by ref(), you must use .value.

Examples

Invalid

import { ref } from "vue"

const count = ref(0)
count++

code-block.js:4:1 lint/correctness/noVueRefAsOperand ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Ref value is accessed without `.value`.
  
    3 │ const count = ref(0)
  > 4 │ count++
      │ ^^^^^
    5 │ 
  
  ℹ Without `.value`, Vue cannot track changes to the ref, which may break reactivity.
  
  ℹ Use `.value` to access ref value.
  

import { ref } from "vue"

const ok = ref(false)
const msg = ok ? "yes" : "no"

code-block.js:4:13 lint/correctness/noVueRefAsOperand ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Ref value is accessed without `.value`.
  
    3 │ const ok = ref(false)
  > 4 │ const msg = ok ? "yes" : "no"
      │             ^^
    5 │ 
  
  ℹ Without `.value`, Vue cannot track changes to the ref, which may break reactivity.
  
  ℹ Use `.value` to access ref value.
  

import { ref } from "vue"

const ok = ref(false)
if (ok) {
  //
}

code-block.js:4:5 lint/correctness/noVueRefAsOperand ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Ref value is accessed without `.value`.
  
    3 │ const ok = ref(false)
  > 4 │ if (ok) {
      │     ^^
    5 │   //
    6 │ }
  
  ℹ Without `.value`, Vue cannot track changes to the ref, which may break reactivity.
  
  ℹ Use `.value` to access ref value.
  

import { ref } from "vue"

export default {
  setup(_props, { emit }) {
    const count = ref(0)
    emit('increment', count)
  }
}

code-block.js:6:23 lint/correctness/noVueRefAsOperand ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Ref value is accessed without `.value`.
  
    4 │   setup(_props, { emit }) {
    5 │     const count = ref(0)
  > 6 │     emit('increment', count)
      │                       ^^^^^
    7 │   }
    8 │ }
  
  ℹ Without `.value`, Vue cannot track changes to the ref, which may break reactivity.
  
  ℹ Use `.value` to access ref value.
  

Valid

import { ref } from "vue"

const count = ref(0)
count.value++

import { ref } from "vue"

const ok = ref(true)
const msg = ok.value ? "yes" : "no"
if (ok.value) {
  //
}

import { ref } from "vue"

export default {
  setup(_props, { emit }) {
    const count = ref(0)
    emit('increment', count.value)
  }
}

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases
• Try in the playground