Ref objects should be used after unwrapping
- VUE_MISSING_REF_UNWRAP
- Error
- Medium
- vue
This rule applies when a ref
object is used without unwrapping the value.
The ref
object is a reactive wrapper object of a value and the actual value is stored in its value
property.
Inside <template>
, Vue provides auto-unwrapping of ref
objects, so that one can directly access the wrapped value without the value
property.
However, caution is needed when using ref
objects inside <script setup>
including function definitions. For example, if a ref
object is used as an operand of +
operator without unwrapping, it is likely a programmer's mistake.
Noncompliant Code Example
View with compliant examples side by side<script setup>
import { ref } from 'vue';
const count = ref(0);
function nextCount() {
count.value = count + 100; // VUE_MISSING_REF_UNWRAP alarm
}
</script>
<template>
<div>{{ count }}</div>
<button @click="nextCount">Next</button>
</template>
Compliant Code Example
View with noncompliant examples side by side<script setup>
import { ref } from 'vue';
const count = ref(0);
function nextCount() {
count.value = count.value + 100;
}
</script>
<template>
<div>{{ count }}</div>
<button @click="nextCount">Next</button>
</template>
Version
This rule was introduced in DeepScan 1.43.0.