55 lines
1.4 KiB
JavaScript
55 lines
1.4 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,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
change(activeTab) {
|
||
|
|
if (this.activeTab === activeTab || activeTab === undefined) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.loading = true;
|
||
|
|
this.activeTab = activeTab;
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "GET",
|
||
|
|
url: activeTab.url,
|
||
|
|
}).then((products) => {
|
||
|
|
if (this.selector().hasClass("slick-initialized")) {
|
||
|
|
this.selector().slick("unslick");
|
||
|
|
}
|
||
|
|
|
||
|
|
this.products = products;
|
||
|
|
this.loading = false;
|
||
|
|
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.selector().slick(this.slickOptions());
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|