Vue.js2 - 数组包含__ob__:Observer

时间:2018-05-07 15:36:41

标签: javascript vue.js vuejs2

(可能)关于vue.js的初学者问题。我尝试使用通过websocket接收的CanvasJS库来显示数据。使用数据工作正常,直到我开始使用vue组件。为了让自己更清楚:

export default {
  data() {
    return {
      cartesian: null,
      ws: null
    }
  },

  methods: {

    fillData(res) {
     var data = JSON.parse(res.data)

     var buffer = data.mdi
     console.log(buffer)

     this.cartesian = data.mdi
     console.log(this.cartesian)
    }

  },

  mounted() {
    this.ws = new WebSocket('ws://localhost:1111')
    this.ws.onmessage = this.fillData
  }
}

console.log(data.mdi)行输出{0: Array(256), 1: Array(256), 2: Array(256), 3: Array(256)}。这正是我期待的以及CanvasJS的作用 但是,console.log(this.cartesian)行会输出{__ob__: Observer}。据我所知,这与vue.js的反应性有关。不幸的是,我不能将this.cartesian的内容与CanvasJS一起使用,因为它没有显示任何数据 由于我没有看到除了使用this.cartesian之外的任何其他方式来显示我的数据,我希望获得有关我在这里可能做错的帮助或如何访问{{1}中的数据的帮助我在浏览器中检查它时可以看到它。

2 个答案:

答案 0 :(得分:2)

因为cartesian是组件数据的一部分,所以它会通过添加getter和setter而变得活跃。

您可以使用一些技巧来绕过这个预期的功能,但如果您使用ES6的对象扩展解构功能,则通常不需要这些功能。

let cartesianObject = {...this.cartesian};
console.log(cartesianObject);

答案 1 :(得分:1)

对于遇到类似问题的任何人:{__ob__: Observer}没有干扰CanvasJS库。我可以毫无问题地使用this.cartesian。我刚刚找不到用数据填充图表的正确方法 console.log在这里可能会产生误导,但您应该能够以与普通js相同的方式使用您的数据而不管{__ob__: Observer}