class ref auto value not allowed
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
// Parent.vue
<template>
<Children :isOpenA="parent.isOpen" :isOpenB="isOpen"></Children>
</template>
<script setup>
import { ref } from "vue";
class Management {
static init = () => new Management();
constructor() {
this.isOpen = ref(false);
}
}
const isOpen = ref(false);
const parent = Management.init();
</script>
// Children.vue
<template>
<div></div>
</template>
<script lang="ts" setup>
const props = defineProps<{
isOpenA: boolean;
isOpenB: boolean;
}>();
console.log(props);
</script>
What is expected?
Class ref and regular ref must come with Boolean values
What is actually happening?
Class ref is props to the ref object and normal ref operates normally as boolean.
System Info
System:
OS: Windows 10 10.0.19045
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-1260P
Memory: 4.95 GB / 15.72 GB
Binaries:
Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.58)
Internet Explorer: 11.0.19041.3570
npmPackages:
vue: ^3.3.4 => 3.3.8
Any additional comments?
No response
Refs are unwrapped:
- In reactive objects
- In Top level variables
Your manager insurance matches neither.
https://vuejs.org/guide/essentials/reactivity-fundamentals.html#additional-ref-unwrapping-details