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

Question

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):

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 1

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))); 
}

// ES6 Destructuring
log: d => ({ ...d })

Answer 2

You may do that:

console.log(JSON.parse(JSON.stringify(this.testData)));

new Vue({
   el:"#app",
	data:{
	testData: { 
           stuff: 'some stuff',
           something: 'some thing'
	}
	},
	methods:{
	log(){	    
           console.log(JSON.parse(JSON.stringify(this.testData)));
	}
	}
	})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <button v-on:click="log">log</button>
</div>