Basically i would like to have my class (changer) take care of its own state, and when it want trigger Vue to update everything depending on the public fields.
When I am using a method it does work however the timer doesn't
From the Vue sources, it seems that i could achive this by running the trigger function like this
trigger(target, \"set\" /* SET */, key, value, oldValue);
https://unpkg.com/vue@3.2.19/dist/vue.global.js #875
However the trigger function is not exported from vue and doesn't seem to be made to be used manually, is there another way? or the only way is to go and set all the way deep from the app2 object?
class changer {
constructor() {
this.value = 0
setInterval(() => {
console.log(this,this.value)
this.value++
}, 2500)
}
changeme() {
this.value++
//tell vue to trigger values dependicies
}
}
var c = new changer();
c.changeme();
console.log(c);
var m = new Map();
m.set("a", 1);
m.set("b", 1);
console.log(m);
var Counter = {
data() {
return {
counter: 0,
m,
c
}
},
}
var app = Vue.createApp(Counter);
var app2 = app.mount('#counter')<script src="https://unpkg.com/vue@next"></script>
<div id="counter">
Counter: {{ counter }}
<span v-for="i in m">{{i}}</span>
<button @click="m.set('a',2)">Change Map</button>
<span>
{{c}}
<button @click="c.changeme()">Change with method</button>
<button @click="c.value++">Change with set</button>
</span>
</div>