Vue.js 上带有图表的 Vuefire

Posted 2023-02-22

【中文标题】Vue.js 上带有图表的 Vuefire

【英文标题】：Vuefire with Chart on Vue.js

【发布时间】：2019-09-10 03:08:15

【问题描述】：

我正在尝试将图表的数组数据与我的 firebase 值同步。图表获取标签和数据的数组。我想将此图表数据值绑定到我的 firebase 对象。这是使用硬编码静态值创建的正常图表：

data()

return appChart: data: labels: ["A"], series: [[3]],
,

现在，我想将此值 (3) 与我的 firebase 对象绑定。通常我可以毫无问题地使用这样的 firebase 对象：

new Vue(
   data: () => ( myObjA: null ),
   firebase: 
      myObjA: db.ref('myObjA'),
      asObject:true
   ,
  )

但我无法使用图表数组系列“a”之类的绑定和动态更新此 myObjA；

data()

return appChart: data: labels: ["A"], series: [[myObjA]],
,

我该怎么做？

【参考方案1】：

您可以将appChart 更改为计算属性：

export default 
  data: () => ( myObjA: null ),
  firebase: 
    myObjA: db.ref('myObjA'),
    asObject:true
  ,
  computed: 
    appChart() 
      return 
        data: 
          labels: ["A"], 
          series: [[this.myObjA]]
        
      
    
  

</script>

【讨论】：

谢谢，当我在计算中尝试静态值时（如系列：[[5]]）它运行良好，但当我尝试使用来自 firebase 的对象时（如系列：[[this.myObjA ]] ) 它没有得到数据.. 图表是空的

没有。当我直接在模板中使用 this.myObjA 时，它与 firebase 绑定并且工作正常。但是当我在计算时使用它时，它没有更新

嗨，当我在计算方法中打印到控制台时，首先它像 一样打印空，然后一秒钟后，它打印 “.value”:5,”.key”:”a”我在 firebase 中的对象：“test”:“a”:5

series: [] 需要一个数组，但是当您使用 console.log 时，“.value”:5,”.key”:”a” 是一个对象。

但是我用的是like；系列：[[this.myObjA.a]] 它应该可以正常工作吗？