Subscribe on changes!

class ref auto value not allowed

avatar
Nov 14th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#__DEV__eNp9U9FK7DAQ/ZUhL64gXS6+rd2CKz7cC1dFfcxLbKfdaJqEJF0Xlv13J+mmW0GEQptzZiZnZk4P7NbaYjcgW7EyYG+VCFhxDVDebaVqHGpYSf9oUd+uObOCgFCMAGeZ2hCVsapc5kyqUy5nRUtfO2kDeAyDpbPsrXEBDuCwhSO0zvTAGYnh7GZiJxmJviim6lH1BcVxXSvhPfwXWnTYkz44xAZ8EEHWILUMsIbFJawr0Pg5i1tcUjpAbbQPbqiDcRSVcgHCVvpTn5RNAhetUB7HjCPX9KQ8+Dlm5MZxEXe+s4h60sXlchwHDYJdseAppZVd8e6NpmUkGZzVprdSoXu0QVJJzlZZIGdCKfP5L2EkH68yXm+x/vgBf/f7iHH25NCj29GYJy4I12EY6fuXB9zT90T2phkURf9CPqM3aogax7DNoBuSPYtLav+mnUrdvfr7fUDtc1NRaJpsik8muPul9bPc6+I6b4SmOPfGd0e75OlG7qo/5TK+IjJ3Zzye/KmE7sjRge7MXiX2tFJnrKeNNthKjU/xVB7G6qffZAVvxigU+mYOb77Dxyp6gD5yZaIKZbpFqj9SZ4PQgR2/APMkQEc=

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

avatar
Nov 14th 2023

Refs are unwrapped:

  1. In reactive objects
  2. In Top level variables

Your manager insurance matches neither.

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#additional-ref-unwrapping-details