Debugging in Vue. Quick and dirty way to console.dir () a reactive variable?

I have this faulty code in a Vue component called _errors

undefined

in data

, at least when the page is loaded.

  data: function () {
     var temp = {
        show_debug : false
        ,password_changed_flag : false
        ,_errors : this.$store.state.form01._errors  || {}
     }

    var data = Object.assign({}, this.$store.state.form01.data, temp);

    //this is the part I am struggling with:
    console.log("data:");
    console.dir(data);


    return data;
  },

      

This is not what I am doing wrong, this is about how easy console.dir(data)

Vue is to reactive objects.

those. how can i print a simple nested object minus getters and setters? And take a snapshot of this object.

i.e. _errors

seems to be present now, but I would like to only display the state of the object upon completion of the function data

, and not track subsequent changes.

I am currently getting the following in Firefox and Chrome:

enter image description here

+3


source to share


1 answer


console.log(JSON.parse(JSON.stringify(thing))) 

      



Will not work on Vue itself, but should be fine for data properties.

+4


source







All Articles