[Vuejs]-Vuex issue transforming data into observer

by

0👍

✅

That’s not an issue but instead a caveat between the browser and Vue’s reactivity system. To learn more about Vue’s reactivity check their docs on Reactivity in Depth, there they explain how it works and even mention this caveat:

One caveat is that browser consoles format getter/setters differently when converted data objects are logged…

And they recommend to use vue-devtools for a friendlier introspection interface.

However there is a way to see logged variables with their data without having to use vue-devtools, the way is to log them using console.log(JSON.parse(JSON.stringify(data))), as shown below, to verify it correctly use the browser console, as StackOverflow’s console already shows without the observer.

var app = new Vue({
  el: '#app',
  data: () => ({
    obj: {
      a: 123
    }
  }),
  created() {
    console.log('Observer');
    console.log(this.obj);
    console.log('Data');
    console.log(JSON.parse(JSON.stringify(this.obj)));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Leave a comment