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.

Auto-unwrapping is applied for ref objects returned from the setup function. So, one can directly access the wrapped value without the value property after setup() including the component <template>.

However, caution is needed when using ref objects inside setup() including nested 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

<script>
import { ref } from 'vue';

export default {
  setup() {
    const c = ref(0);
    return {
      c,
      next: () => c + 1 // VUE_MISSING_REF_UNWRAP alarm
    };
  }
}
</script>

Compliant Code Example

<script>
import { ref } from 'vue';

export default {
  setup() {
    const c = ref(0);
    return {
      c,
      next: () => c.value + 1
    };
  }
}
</script>

Version

This rule was introduced in DeepScan 1.43.0.

See

• Refs