noVueRefAsOperand

JavaScript (and super languages)

Note

This rule has been implemented but not released yet. It will be available in the next release.

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Diagnostic Category: lint/nursery/noVueRefAsOperand
• 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": {
      "nursery": {
        "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/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

import { ref } from "vue"

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

code-block.js:4:13 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

import { ref } from "vue"

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

code-block.js:4:5 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

import { ref } from "vue"

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

code-block.js:6:23 lint/nursery/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.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

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
• Test Cases