VueJS Series, Part 3 — Reactivity

tl;dr

Read: Vuejs.org — Reactivity in Depth
Use Vue devtools and check if you attribute/variable has get/set

I’m fortunate to work on a company that embraces new technology in their projects. That’s one of two main reasons why I use VueJS today. The second reason is basically because the PHP Laravel framework author said it was awesome (LOL).

Today I spent around two hours figuring out why one attribute of one object didn’t has reactivity. The scenario was this:

new Vue({
    /* ... */ 
    ready() { 
        // *1 - setting the procedure array
        this.procedures = $.data(document.body,'procedures');
        // *2 - updating element in array
        this.procedures = this.procedures.map((el) => { 
            proc.select = false;
        });
    }
});

Since I added the attribute ‘select’ (*2) on each object of the procedures array after(*1) the procedures array is set, VueJS won’t add an Observer in that variable! In this specific case, the $set won’t work.

To solve this issue, all I had to was:

• Read this article about Reactivity in Depth in VueJS;
• When I understood how it works, I realized (using Vue devtools) the attribute ‘select’ didn’t has any get/set methods attached to it (though, no Oberver!).

The solution was:

new Vue({
    ... 
    ready() { 
        // *1 - set the procedures array with "select's" attr!
        this.procedures =
            $.data(document.body,'procedures').map(
                (el) => proc.select = false
            );
    }
});

All I had to do was first assign the procedures array with the object I expected.