如何在不將 html 綁定到方法的情況下更新 Vue.js 數據？

Question

我有一個 vue.js 文件，用戶可以使用 select 不同的圖表。 圖表的選擇被定義為activeOrderView並隨着@click改變。 不同的圖表具有不同的 x 軸類別和 y 軸值。

我的問題是，圖表的數據是從data()中獲取的，並且使用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? 我正在使用 Vue-apexchart 組件，因此我無法將方法中的函數直接綁定到 HTML 模板。

HTML 模板

<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();
    }
}

謝謝！

Answer 1

切換視圖時只需執行getOrderCategories()和getOrderData() 。

我會用一種方法來做到這一點，否則你的@click表達式會變得混亂。

例如

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

在你的標簽中

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