[Vuejs]-Vue3: deep reactivity

by

1👍

✅

Try this:

<script setup>
import { ref, reactive } from 'vue'

const disabled = ref(false);

const menu = reactive([
  {
    disabled
  }
 ]);
</script>

<template>
  
  {{disabled}}
  <button @click="disabled = !disabled">
    Toggle
  </button>
  
  <br>
  {{menu[0]?.disabled}}
</template>

Сode in the vue playground

Docs

2👍

disabled is passed by value in setup block, there is no way how menu could be associated with disabled this way, that disabled.value === false makes this efficiently the same as:

const menu = reactive<[]>([{ disabled: false }]);

It should be:

const menu = reactive<[]>([{ disabled }]);

A ref is unwrapped when used inside reactive object, menu[0].disabled === disabled.value.

Leave a comment