Question

我是Vuejs的新手。我从Vue，Firebase开始一个项目，并在其中使用Chart Js。这是问题的详细信息。

如果我在 data（）中提供了 sales_today 的任何值，则它会在 this.sales_today 使用的安装位置正确显示完全适合模板 {{sales_today}} 。

但是在“已创建”中，我正在尝试通过firebase查询的输出更改此 sales_today 值。然后输出完美显示在模板 {{sales_today}} 中，但无法在此处安装的

中工作

 **data: [this.sales_today,30,60,10]**

模板

<template>
   {{sales_today}}
</template>

数据

data(){
  return{
        sales_today:''            
    }
},

已安装

mounted() {
    data: {
         datasets: [{                     
               data: [this.sales_today,30,60,10],                        
         }]
    }    
}

已创建

created(){
     let ref = db.collection('sales').where("sales_date", "==", moment().format('DD-MM-YYYY'))
       .get()
       .then(snapshot => {
        var total = 0;
        snapshot.forEach(doc => {
           total += Number(doc.data().price)
        })
        this.sales_today = total
     })
}

这是完整的代码 https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/dashboard/Dashboard.vue

Answer 1

这应该在mount（）上。我没有评论的编辑者，我将在这里回答。

let ref = db.collection('sales').where("sales_date", "==", moment().format('DD-MM-YYYY'))
   .get()
   .then(snapshot => {
    var total = 0;
    snapshot.forEach(doc => {
       total += Number(doc.data().price)
    })
    this.sales_today = total;

        var chart = this.$refs.chart;
        var ctx = chart.getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels:this.labels,
                datasets: [{
                    label: 'Sales of June',
                    data: [this.sales_today,30,60,10],
                    backgroundColor: [
                        '#ffffff'
                    ],
                    borderColor: [
                        '#1976d2'
                    ],
                    borderWidth: 3
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            },
        });


 })

P.S。检查控制台中的错误

Vuejs数据在已安装的

1 个答案: