vue3-apexcharts
vue3-apexcharts copied to clipboard
Invalid watch source: undefined
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}
}
}
same problem
just experienced the same problem - solved it by passing type="line" - I had assumed this was default. passing this cleared the error for me.
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.