Not working for array.push

[Hugo Heneault]

I was really excited of seing mobx ported into Vue. Thank you so much!

I got stuck for quite awhile because I used array.push and it wasn't detecting my changes.

Here's my code:

app.js

window.Vue = require('vue');

import {observable, isObservable, toJS} from 'mobx';
import VueRouter from 'vue-router';
import VueMobx from 'vue-mobx';
Vue.use(VueRouter);
Vue.use(VueMobx, {
    /**
     * config is needed.
     * you can visit it by this.$observable/this.$isObservable/$toJS in your vue component
     */
    toJS: toJS,  // must
    isObservable: isObservable, //must
    observable: observable,  //optional
});

import App from './components/ExampleComponent';

const Outer = {template: '<router-view></router-view>'};

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '', component: App }
    ]
});

const app = new Vue({
    router,
    ...Outer
});

app.$mount('#app');

mobx/Board.js

import {observable, action} from 'mobx';

class Board {
    @observable boards = [];

    @action.bound addBoard(name) {
        this.boards.push(name)
    }
}

const board = new Board();
export default board;

components/ExampleComponent.vue

<template>
    <div>
        <div>{{ boards}}</div>
        <button @click="addBoard(1)">AddBoard</button>
    </div>
</template>

<style>
</style>

<script>
    import Board from '../mobx/Board'

    export default {
        fromMobx: {
            Board
        },
        updated(){
            console.log('info updated', this.$toJS(this.info));
        }
    }
</script>

Working with

It's working if I use

@action.bound addBoard(name) {
     this.boards= [...this.boards, name]
}

Do you know what's wrong here?

Thanks alot!

[Pomy]

@HugoHeneault Thanks your feedback, but I'm sorry to that I have no idea for this. Is there anyone can help me?

[Hugo Heneault]

I've got the same issues for about every array manipulation: array.push, array.splice, array[index] = ...

I think there is something wrong with your observables but I can't find where you're setting them. :(

[Hugo Heneault]

I made a stackblitz so anyone can see the issue: https://stackblitz.com/edit/vue-mobx-array-issue?file=model.js

I'll try to have a look but I don't understand yet how mobx and vue are watching changes.

[Pomy]

@HugoHeneault What vue-mobx do is just collect observable prop by @observable in mobx(code is here). Then call defineReactive method of vue(code is here).

[Hugo Heneault]

So you're not using mobx reactive system but only faking it with defineReactive? 🙂

[Pomy]

I don't know it whether using mobx reactive system. But the purpose of calling the defineReactive method is to use vue reactive system

[Kuitos]

Maybe u can try mobx-vue, which use mobx reactive system to manage the reactions😜.