如何在控制台记录 Vuejs 数据时过滤掉 getter 和 setter？

Question

我正在写一个 vue js 应用程序。

当我从 vue 实例控制台记录数据时，我看到它是与我无关的 getter 和 setter。

var vm = new vue({

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

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

可以看上面的例子here.

这是我在控制台中得到的（非常脏）：

我可以在记录之前，但这对于简单的日志来说似乎有点过分了。

Vue 曾经有一个用于此目的的内置 $log 方法，但它已在 v2 中删除。

有谁知道如何在记录之前从 getters/setters 中过滤数据？

Answer 1

你可以这样做：

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>

Answer 2

以下其中一项应该可以解决问题：

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

如何在控制台记录 Vuejs 数据时过滤掉 getter 和 setter？

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

javascript

console.log

vue.js