CODEWITHSUNDEEP
vue.js
cryogenic
cryogenic

Reputation: 55

Vue doesn't update when global instance property changes

I have the following code in my app.js (after importing Vue and before new Vue()):

Vue.prototype.$globalArray = [];

And in one of my Vue components I have the following:

<span v-for="item in $globalArray">{{ item }}</span>

The problem then is that when I do $vm0.$globalArray.push('some text'); in my Chrome dev tools (with the Vue extension hence the $vm0), nothing happens. However when I change my app.js to

Vue.prototype.$globalArray = 'some other text';

It does actually show the 'some other text' so it looks like it only renders the initial value but doesn't update. The same goes for when I set a timeout of a couple of seconds after the component has mounted and then insert something in the $globalArray.

Could someone tell me whether I'm doing something wrong or that this is not supported?

Thanks in advance

Upvotes: 1

Views: 688

Answers (1)

Emīls Gulbis
Emīls Gulbis

Reputation: 2070

You are defining just a global vue instance and it isn't reactive by default - https://v2.vuejs.org/v2/cookbook/adding-instance-properties.html

To make it reactive you can follow Vue.observable for example - https://v2.vuejs.org/v2/api/#Vue-observable

Vue.prototype.$global = Vue.observable({array: []})

Upvotes: 3

Related Questions