52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
export default {
|
|
data() {
|
|
return {
|
|
tabs: [],
|
|
activeTab: null,
|
|
loading: false,
|
|
products: [],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
this.tabs = this.$children.filter((component) => {
|
|
return component.$options.name === "DynamicTab";
|
|
});
|
|
|
|
// Show the first tab by default on page load.
|
|
this.change(this.tabs[0]);
|
|
},
|
|
|
|
methods: {
|
|
classes(tab) {
|
|
return {
|
|
"tab-item": true,
|
|
loading: this.activeTab === tab && this.loading,
|
|
active: this.activeTab === tab && !this.loading,
|
|
};
|
|
},
|
|
|
|
async change(activeTab) {
|
|
if (this.activeTab === activeTab || activeTab === undefined) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
this.activeTab = activeTab;
|
|
|
|
const response = await axios.get(activeTab.url);
|
|
|
|
if (this.selector().hasClass("slick-initialized")) {
|
|
this.selector().slick("unslick");
|
|
}
|
|
|
|
this.products = response.data;
|
|
this.loading = false;
|
|
|
|
this.$nextTick(() => {
|
|
this.selector().slick(this.slickOptions());
|
|
});
|
|
},
|
|
},
|
|
};
|