A question for beginners in vue.js. I am trying to display data using the CanvasJS Library that is received via websocket. Everything works fine with the data until I introduce vue components into the mix. Let me clarify:
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
}
}
When console.log(data.mdi) is used, it outputs
{0: Array(256), 1: Array(256), 2: Array(256), 3: Array(256)}However, when
console.log(this.cartesian) is used, it outputs {__ob__: Observer}. This seems to be related to the reactivity of vue.js. But unfortunately, I am unable to utilize the contents of this.cartesian with CanvasJS because it does not show any data.Since I don't see any other way to display my data without using
this.cartesian, I am seeking help on what might be causing this issue or how I can access the data within this.cartesian as it seems to be present when inspected in the browser.