CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Lars Jagodzinski
Lars Jagodzinski

Reputation: 71

Vue.js2 - Array contains __ob__ : Observer

(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 components. 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.

Upvotes: 4

Views: 8993

Answers (2)

Lars Jagodzinski
Lars Jagodzinski

Reputation: 71

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.

Upvotes: 2

Daniel
Daniel

Reputation: 35684

Because cartesian is part of your component data, it becomes 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);

Upvotes: 3

Related Questions