In my Vue.js application, I have a file where users can choose from different graphs by setting the activeOrderView variable through a @click event. Each graph has its own set of x-axis categories and y-axis values.
The issue I am facing is that when a user selects a different graph, the data for that graph is not being updated. The data is fetched from the data() function and then updated using two functions within the methods. However, even after selecting a new graph, the original data remains the same. How can I ensure that the data is updated when a different graph is selected? It's worth noting that I'm using the Vue-apexchart component, so binding the methods directly to the HTML template is not an option.
Here is a snippet of the HTML template:
<b-tabs card fill>
<b-tab title="Popular products" :title-link-class="'tab-title-class'" @click="activeOrderView = 'popularProducts'" active>
<div v-if="activeOrderView === 'popularProducts'">
<apexcharts type="bar" :options="chartOptions" :series="series"></apexcharts>
</div>
</b-tab>
...
</b-tabs>And here is a snippet of the script:
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
// Component setup
// Data and methods definitions
created() {
this.getOrderCategories();
this.getOrderData();
}
}
If anyone can provide insight on how to solve this problem, it would be greatly appreciated. Thank you!