vue3-apexcharts icon indicating copy to clipboard operation
vue3-apexcharts copied to clipboard

Invalid watch source: undefined

Open bci24 opened this issue 4 years ago • 3 comments

I get some warning in the chrome console:

[Vue warn]: Invalid watch source:  undefined A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types. 
  at <Apexchart height="350" options= {chart: {…}, colors: Array(1), fill: {…}, plotOptions: {…}, xaxis: {…}, …} series= [{…}] > 
  at <Last7DaysOrdersChart chart-data= {} > 

What does it mean

Invalid watch source:  undefined 

???

The component works fine... but it's annoying that warning.

The component is this:

import VueApexCharts from "vue3-apexcharts";
import {ref, toRefs, watch} from "vue";

export default {
    name: "Last7DaysOrdersChart",
    components: {VueApexCharts},
    props: {
        chartData: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const  last7DaysOrdersChartOptions = ref({
            chart: {
                id: "last_7_days_orders",
                type: 'bar',
                toolbar: {
                    show: false,
                }
            },
            colors: ['#fb6340'],
            fill: {
                opacity: 1,
            },
            plotOptions: {
                bar: {
                    columnWidth: '45%',
                }
            },
            xaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
            },
            labels: [],
        })

        const last7DaysOrdersChartSeries = ref([
            {
                name: "Orders",
                data: []
            }
        ])

        const { chartData } = toRefs(props)
        const updateOptionsChart = () => {
            window.ApexCharts.exec("last_7_days_orders", "updateOptions", {
                series: [{
                    data: chartData.value
                }],
            });
        }

        watch(chartData, updateOptionsChart)

        return {last7DaysOrdersChartOptions,last7DaysOrdersChartSeries}
    }
}

bci24 avatar May 04 '21 11:05 bci24

same problem

dbapril avatar Jun 07 '21 11:06 dbapril

just experienced the same problem - solved it by passing type="line" - I had assumed this was default. passing this cleared the error for me.

chrisjkellett avatar Jun 09 '21 15:06 chrisjkellett

I got the same problem with a donut chart, following what @chrisjkellett said, adding the type of my chart in my html apexchart tag worked.

Douare avatar Jun 16 '21 10:06 Douare