I am facing a problem when I try to update properties of a reactive 'global variable' (using Vue 3). When I change the name of the user, this should(?) re-render the element, but it doesn't. What am I missing here?
<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>
It does show the initial name. When one presses the button, the name value in the controller will change though (you can check that it changed in the console). Only the re-render doesn't happen.
Also tried using this.controller.user.name, but without any luck.
Vue.reactive returns a proxy that observes changes and triggers the re-render if needed.
You have to use the proxy to change properties for it to be reactive:
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>It is a lot easier though to just let vue handle the reactivity part:
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>If you want to change the name from outside of the component you can still use app.name = 'Something' to change it.