I am using vue 3.2.6 together with vite 2.5.4 and primevue 3.7.2 (and chart 3.5.1).
I use the vue3 composition api with script setup.
I am trying to insert a vue bar chart which fails to re-render chart on data change.
I have verified that the data (which is reactive) is being updated - note that if I resize the browser window then the chart does update.
In notes there is mention of refresh method but I am unsure how to access this method - can you please advise.
Chart component
I have figured out issue with chart not updating. The vue component is watching prop 'data' which is not triggering on changes within the object and requires the entire data object to be replaced.
This can be remedied by using deep option on watch.
Change
to
I have created a PR
This can be remedied by using deep option on watch.
Change
Code: Select all
watch: {
data(): {
this.reinit();
}
Code: Select all
watch: {
data: {
handler(val, oldVal) {
this.reinit();
},
deep: true
},
...
In the meantime, I have used a mixin to extend Chart.vue with ChartEx.vue.
To use, simply import ChartEx.vue instead of Chart.vue
To use, simply import ChartEx.vue instead of Chart.vue
Code: Select all
import Chart from '/@/components/ChartEx.vue'
Code: Select all
<template>
<h1>Usage View</h1>
<Chart id="cbchart" type="bar" :data="monthlyData" :options="options"/>
</template>
Code: Select all
<script lang='js'>
import ChartMixin from 'primevue/chart'
export default {
mixins: [ChartMixin],
watch: {
data: {
handler(val, oldVal) {
this.reinit();
},
deep: true
}
}
}
</script>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 9 guests