src/content/docs/linter/rules/no-vue-ref-as-operand.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JavaScript (and super languages)" icon="seti:javascript"> :::caution This rule is part of the [nursery](/linter/#nursery) group. This means that it is experimental and the behavior can change at any time. ::: ## Summary - Rule available since: `v2.4.5` - Diagnostic Category: [`lint/nursery/noVueRefAsOperand`](/reference/diagnostics#diagnostic-category) - This rule doesn't have a fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - This rule belongs to the following domains: - [`vue`](/linter/domains#vue) - Sources: - Same as [`vue/no-ref-as-operand`](https://eslint.vuejs.org/rules/no-ref-as-operand){
"linter": {
"rules": {
"nursery": {
"noVueRefAsOperand": "error"
}
}
}
}
Disallow the use of value wrapped by ref()(Composition API) as operand
To access value wrapped by ref(), you must use .value.
import { ref } from "vue"
const count = ref(0)
count++
import { ref } from "vue"
const ok = ref(false)
const msg = ok ? "yes" : "no"
import { ref } from "vue"
const ok = ref(false)
if (ok) {
//
}
import { ref } from "vue"
export default {
setup(_props, { emit }) {
const count = ref(0)
emit('increment', count)
}
}
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)
}
}