hitautodestruct hitautodestruct - 7 days ago 5
Javascript Question

How to filter out getters and setters when console logging Vuejs data?

I am writing a vue js app.

When I console log the data from the vue instance I see it with it's getters and setters which are not relevant to me.

var vm = new vue({

data () { return { testData: { stuff: 'some stuff' } }; },

methods: {
log () {
console.log( this.testData );
}
}
})


You can see the above example here.

This is what I get in the console (very dirty):

enter image description here

I can remove the setters before logging but that seems to be overkill for a simple log.

Vue used to have a built in
$log
method for this purpose, but it has been removed in v2.

Does anyone have any idea how to filter the data from the getters/setters before logging?

Answer

One of the following should do the trick:

log: function(d) {
    console.log(Object.assign({}, this.form));
}

// if you have jQuery
log: function(d) {
    console.log($.extend({}, this.form));
}

// what $log does
log: function(d) {
    console.log(JSON.parse(JSON.stringify(this.form));
}