CODEWITHSUNDEEP
javascriptvue.jsvuejs3
Xriter
Xriter

Reputation: 200

Vue 3 reactive global variable changes, but won't re-render

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.

Upvotes: 0

Views: 1830

Answers (1)

Turtlefight
Turtlefight

Reputation: 10680

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.

Upvotes: 1

Related Questions