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

Question

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.

try by adding a "key" attribut to the div element, setting it to key="controller.user.name" — Tarik Merabet
– Tarik Merabet, Commented Sep 21, 2021 at 16:34

Turtlefight · Accepted Answer · 2021-09-21 16:31:47Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related