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
--fixoption 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