vue/ref-value-in-script

Why

Templates unwrap refs, script code does not. if (isOpen) tests the ref object, which is always truthy, so the branch always runs; count + 1 gives "[object Object]1", and items === null is never true. The code type-checks loosely in JavaScript and fails only at run time.

Fix

Use .value in script: if (isOpen.value), count.value + 1. In the template keep the plain name. If a value never needs to be reactive on its own, group it in an object returned from a composable rather than mixing refs and plain values.

Examples

// bad
const isOpen = ref(false)
function toggle() { if (isOpen) close() }
// good
const isOpen = ref(false)
function toggle() { if (isOpen.value) close() }

Sources

• Vue docs, Reactivity Fundamentals (declaring reactive state with ref)
• eslint-plugin-vue, no-ref-as-operand

Read it in the terminal

npx github:dawidolko/frontend-skills explain vue/ref-value-in-script