[英]How to update Vue.js data without binding html to methods?
我有一个 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();
}
}
谢谢!
切换视图时只需执行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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.