# vue/no-ref-as-operand
disallow use of value wrapped by
ref()(Composition API) as an operand
- ⚙️ This rule is included in all of
"plugin:vue/vue3-essential","plugin:vue/essential","plugin:vue/vue3-strongly-recommended","plugin:vue/strongly-recommended","plugin:vue/vue3-recommended"and"plugin:vue/recommended". - 🔧 The
--fixoption on the command line (opens new window) can automatically fix some of the problems reported by this rule.
# 📖 Rule Details
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>
# 🔧 Options
Nothing.
# 📚 Further Reading
- Guide - Reactivity - Reactivity Fundamentals / Creating Standalone Reactive Values as
refs(opens new window) - Vue RFCs - 0013-composition-api (opens new window)
# 🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0