diff --git a/docs/.vuepress/components/Tab.vue b/docs/.vuepress/components/Tab.vue index 4f0f24a91..a77b9ae3c 100644 --- a/docs/.vuepress/components/Tab.vue +++ b/docs/.vuepress/components/Tab.vue @@ -15,23 +15,23 @@ import Vue from "vue"; export default Vue.extend({ props: { title: { - type: String - } + type: String, + }, }, data() { return { tabID: "", - labelID: "" + labelID: "", }; }, beforeMount() { - let tag = - "tab-" + - Math.random() - .toString(36) - .substring(2); + let tag = "tab-" + Math.random().toString(36).substring(2); this.tabID = tag; this.labelID = tag + "-" + "label"; - } + + // Since Vue 3.0, we have no access to $children. + // So we need another approach to register our child components. + this.$parent.$data.children.push(this); + }, }); diff --git a/docs/.vuepress/components/Tabs.vue b/docs/.vuepress/components/Tabs.vue index 47a142347..dfb976819 100644 --- a/docs/.vuepress/components/Tabs.vue +++ b/docs/.vuepress/components/Tabs.vue @@ -29,32 +29,32 @@ import Vue from "vue"; export default Vue.extend({ props: { title: { - type: String - } + type: String, + }, }, data() { return { - children: [] + children: [], }; }, created() { - this.children = this.$children; + this.children = []; }, mounted() { - this.$nextTick(function() { + this.$nextTick(function () { const bootstrap = require("bootstrap"); let triggerEl = document.getElementById(this.children["0"].$data.labelID); new bootstrap.Tab(triggerEl).show(); }); }, computed: { - tag: function() { + tag: function () { return "tabs-" + this.title; }, - contentTag: function() { + contentTag: function () { return "tabs-" + this.title + "-content"; - } - } + }, + }, });