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/essential"
,*.configs["flat/essential"]
,"plugin:vue/vue2-essential"
,*.configs["flat/vue2-essential"]
,"plugin:vue/strongly-recommended"
,*.configs["flat/strongly-recommended"]
,"plugin:vue/vue2-strongly-recommended"
,*.configs["flat/vue2-strongly-recommended"]
,"plugin:vue/recommended"
,*.configs["flat/recommended"]
,"plugin:vue/vue2-recommended"
and*.configs["flat/vue2-recommended"]
. - 🔧 The
--fix
option on the command line 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(_props, { emit }) {
const count = ref(0)
const ok = ref(true)
/* ✓ GOOD */
count.value++
count.value + 1
1 + count.value
var msg = ok.value ? 'yes' : 'no'
emit('increment', count.value)
/* ✗ BAD */
count++
count + 1
1 + count
var msg = ok ? 'yes' : 'no'
emit('increment', count)
return {
count
}
}
}
</script>
🔧 Options
Nothing.
📚 Further Reading
- Guide - Reactivity - Reactivity Fundamentals / Creating Standalone Reactive Values as
refs
- Vue RFCs - 0013-composition-api
🚀 Version
This rule was introduced in eslint-plugin-vue v7.0.0