Me enfrento a un problema cuando trato de actualizar las propiedades de una 'variable global' reactiva (usando Vue 3). Cuando cambio el nombre del usuario, esto debería (?) volver a representar el elemento, pero no lo hace. ¿Que me estoy perdiendo aqui?
<div id="app"> {{ controller.user.name }} <button @click="controller.change">Change</button> </div> <script src="https://unpkg.com/vue@next"></script> <script> var controller = { user: { name: 'Pete' }, change: () => { controller.user.name = 'Arnold' } } var reactive = Vue.reactive({controller}); var app = Vue.createApp({ data() { return reactive } }).mount('#app') </script>Muestra el nombre inicial. Sin embargo, cuando uno presiona el botón, el valor del nombre en el controlador cambiará (puede verificar que cambió en la consola). Solo el re-render no sucede.
También intenté usar this.controller.user.name , pero sin suerte.
Vue.reactive devuelve un proxy que observa los cambios y activa la nueva representación si es necesario.
Tienes que usar el proxy para cambiar las propiedades para que sea reactivo:
var reactive; var controller = { user: { name: 'Pete' }, change: () => { reactive.controller.user.name = 'Arnold' } } reactive = Vue.reactive({controller}); var app = Vue.createApp({ data() { return reactive } }).mount('#app') <div id="app"> {{ controller.user.name }} <button @click="controller.change">Change</button> </div> <script src="https://unpkg.com/vue@next"></script>Sin embargo, es mucho más fácil dejar que vue maneje la parte de reactividad:
var app = Vue.createApp({ data() { return { name: 'Pete' }; } }).mount('#app') <div id="app"> {{ name }} <button @click="name = 'Arnold'">Change</button> </div> <script src="https://unpkg.com/vue@next"></script> Si desea cambiar el nombre desde fuera del componente, aún puede usar app.name = 'Something' para cambiarlo.