How to update Vue.js data without binding html to methods?

Question

I have a vue.js file that the user can select different graphs. The selection of the graph is defined as activeOrderView and changes with @click. Different graphs have different x-axis categories and y-axis values.

My problem is, the data of the graphs are fetched from data(), and the data are updated with two functions in methods. The data does not update when a different graph is selected and the original data is retained even another graph is selected. How can I force the data to be updated by the functions when a different graph is selected? I am using the Vue-apexchart component so I cannot bind the functions in method directly to the HTML template.

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-tab title="Least popular products" :title-link-class="'tab-title-class'" @click="activeOrderView = 'leastPopularProducts'">
            <div v-if="activeOrderView === 'leastPopularProducts'">
                <apexcharts type="bar" :options="chartOptions" :series="series"></apexcharts>
            </div>
        </b-tab>
        <b-tab title="Total orders" :title-link-class="'tab-title-class'" @click="activeOrderView = 'totalOrders'">
            <div v-if="activeOrderView === 'totalOrders'">
                <apexcharts type="line" :options="chartOptions" :series="series"></apexcharts>
            </div>
        </b-tab>
        <b-tab title="Order status" :title-link-class="'tab-title-class'" @click="activeOrderView = 'orderStatus'">
            <div v-if="activeOrderView === 'orderStatus'">
                <apexcharts type="pie" :options="chartOptions" :series="series"></apexcharts>
            </div>
        </b-tab>
    </b-tabs>

<script>
import VueApexCharts from 'vue-apexcharts'

export default {
    name: 'dashboard-analytics-orders',
    components: {
        apexcharts: VueApexCharts
    },
    data () {
        return {
            activeOrderView: 'popularProducts',
            chartOptions: {
                chart: {
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 800,
                        animateGradually: {
                            enabled: true,
                            delay: 150
                        },
                        dynamicAnimation: {
                            enabled: true,
                            speed: 350
                        }
                    },
                },
                xaxis: {
                    title: {
                        text: 'Product name'
                    },
                    categories: []
                },
                yaxis: {
                    title: {
                        text: 'Number of orders'
                    },
                    min: 0
                },
                colors: ['#ff0000'],
                grid: {
                    row: {
                        colors: ['#f3f3f3', 'transparent'],
                        opacity: 0.8
                    }
                }
            },
            series: [{
                name: 'orders',
                data: []
            }]
        }
    },
    methods: {
        getOrderCategories: function () {
            if (this.activeOrderView === 'popularProducts') {
                this.chartOptions = {...this.chartOptions, ...{
                    xaxis: {
                        categories: ['Apple iPhone', 'Apple iWatch', 'Apple Macbook Pro', 'Samsung Galaxy Fold', 'Chromebook']
                    }
                }}
                console.log('1');
            } else if (this.activeOrderView === 'leastPopularProducts') {
                this.chartOptions = {...this.chartOptions, ...{
                    xaxis: {
                        categories: ['Chair', 'Table', 'Haddock', '3D printer', 'Yamaha 2-stroke engine']
                    }
                }}
                console.log('2');
            } else if (this.activeOrderView === 'totalOrders') {
                this.chartOptions = {...this.chartOptions, ...{
                    xaxis: {
                        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    }
                }}
            } else if (this.activeOrderView === 'orderStatus') {
                this.chartOptions = {...this.chartOptions, ...{
                    xaxis: {
                        categories: ['Completed', 'Processing', 'Dispatched', 'On hold', 'Cancelled', 'Refunded']
                    }
                }}
            }
        },
        getOrderData: function () {
            if (this.activeOrderView === 'popularProducts') {
                this.series = [{
                    data: [950, 789, 751, 654, 159]
                }];
            } else if (this.activeOrderView === 'leastPopularProducts') {
                this.series = [{
                    data: [50, 23, 22, 20, 1]
                }];
            } else if (this.activeOrderView === 'totalOrders') {
                this.series = [{
                    data: [981, 766, 885, 463, 498, 879, 465, 979, 159, 684, 654, 846]
                }];
            } else if (this.activeOrderView === 'orderStatus') {
                this.series = [{
                    data: [300, 10, 12, 2, 32, 16]
                }];
            }
        }
    },
    created() {
        this.getOrderCategories();
        this.getOrderData();
    }
}

Thank you!

Phil · Accepted Answer · 2020-05-29 00:19:07Z

1

Simply execute getOrderCategories() and getOrderData() when you switch views.

I would do so with a method, otherwise your @click expressions will get messy.

For example

methods: {
  // snip
  switchActiveOrderView(view) {
    this.activeOrderView = view
    this.getOrderCategories()
    this.getOrderData()
  }
}

and in your tabs

<b-tab 
  title="Popular products" 
  title-link-class="tab-title-class"
  @click="switchOrderView('popularProducts')"
  active>

answered May 29, 2020 at 0:19

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Duncan Hui Over a year ago

Thanks so much! I tried a similar approach before, turned out I was missing 'this' for both functions.

Phil Over a year ago

@DuncanHui funny enough, I did the same when writing out this answer 😂

Collectives™ on Stack Overflow

How to update Vue.js data without binding html to methods?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related