javascript - Vue.js2 - Array contains __ob__ : Observer - Stack Overflow

admin管理员组

文章数量:1397031

(Probably) a beginners question regarding vue.js. I'm trying to display Data using the CanvasJS Library received via websocket. Working with the data works fine until I start using vue ponents. To make myself clearer:

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

The line console.log(data.mdi) outputs {0: Array(256), 1: Array(256), 2: Array(256), 3: Array(256)}. This is exactly what I'm expecting and what works with CanvasJS.
The line console.log(this.cartesian) however outputs {__ob__: Observer}. A far as I understand, this has to do with the reactiveness of vue.js. Unfortunately I cannot use the contents of this.cartesian with CanvasJS because it does not show any data.
As I don't see any other way to display my data other than using this.cartesian I'm hoping for help regarding what I might be doing wrong here or how to access the data in this.cartesian as I can see its there when inspecting it in my browser.

(Probably) a beginners question regarding vue.js. I'm trying to display Data using the CanvasJS Library received via websocket. Working with the data works fine until I start using vue ponents. To make myself clearer:

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

The line console.log(data.mdi) outputs {0: Array(256), 1: Array(256), 2: Array(256), 3: Array(256)}. This is exactly what I'm expecting and what works with CanvasJS.
The line console.log(this.cartesian) however outputs {__ob__: Observer}. A far as I understand, this has to do with the reactiveness of vue.js. Unfortunately I cannot use the contents of this.cartesian with CanvasJS because it does not show any data.
As I don't see any other way to display my data other than using this.cartesian I'm hoping for help regarding what I might be doing wrong here or how to access the data in this.cartesian as I can see its there when inspecting it in my browser.

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked May 7, 2018 at 15:36 Lars JagodzinskiLars Jagodzinski 7111 silver badge66 bronze badges 2

• 1 {__ob__: Observer} is just an indication that cartesian is a property observed by Vue. There should be a carat next to it that you can expand to see the values. There is no reason this should interfere with your library code. I expect there is something else going on. – Bert Commented May 7, 2018 at 16:36
• You were right. I hadn't found the right way to dynamically populate the Chart with my Data. {__ob__: Observer} does not seem to interfere. Thanks! – Lars Jagodzinski Commented May 8, 2018 at 10:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Because cartesian is part of your ponent data, it bees reactive by adding getters and setters.

You can use some tricks to get around this intended feature, but that's usually not needed if you use the object spread destructuring feature of ES6.

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

For anyone running into a similar problem: The {__ob__: Observer} did not interfere with the CanvasJS Library. I could have used this.cartesian without problem. I just hadn't found the correct way to populate my Chart with Data.
The console.log might be misleading here, but you should be able to use your data regardless of the {__ob__: Observer} in the same ways you could in plain js.

本文标签： javascriptVuejs2Array contains obObserverStack Overflow