javascript - Vue.js2 - 数组包含 __ob__ : Observer

标签 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 的 react 性有关。不幸的是,我不能将 this.cartesian 的内容与 CanvasJS 一起使用,因为它不显示任何数据。
因为除了使用 this.cartesian 我没有看到任何其他方式来显示我的数据,所以我希望就我在这里可能做错了什么或如何访问 中的数据提供帮助this.cartesian 因为我在浏览器中检查它时可以看到它。

最佳答案

因为 cartesian 是您的组件数据的一部分,它通过添加 getter 和 setter 变得响应式。

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

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

关于javascript - Vue.js2 - 数组包含 __ob__ : Observer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50217838/

相关文章:

javascript - 将类函数作为参数传递给另一个类以用作 JavaScript 中的回调

vue.js - 如何将 Prop 传递给 Nuxt 中的页面?

javascript - Vue 集中滚动和调整大小事件(避免组件重复)

vue.js - 如何使用 async/await 在 vue js 中添加 header

vue.js - VUE : Module parse failed: Unexpected token (1:0)

vue.js - 将标记注入(inject)现有的 Vue 组件

javascript - 使用angular 2以印度格式显示数字

javascript - qtip2模态对话框不隐藏

javascript - Chartist JS,X 轴下的折线图

javascript - 根据 Javascript 中的对象评估表中的数组