Merge branch 'issue-2877' (PR #3001)

Fixes #2877.
OnsenUI · Jul 25, 2022 · 2ae2979 · 2ae2979
2 parents 1683d08 + ead935e
commit 2ae2979
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/vue3-onsenui-examples/src/components/Navigator.vue b/vue3-onsenui-examples/src/components/Navigator.vue
@@ -104,7 +104,7 @@
       log,
       push() {
         this.$emit('push', markRaw({
-          ...page2,
+          extends: page2,
           onsNavigatorProps: {
             myProp: 'This is a navigator prop'
           }

diff --git a/vue3-onsenui/src/components/VOnsNavigator.vue b/vue3-onsenui/src/components/VOnsNavigator.vue
@@ -2,9 +2,9 @@
   <ons-navigator @postpop.self="_checkUserInteraction" :options.prop="options">
     <slot>
       <component
-        v-for="page in internalPageStack"
+        v-for="(page, index) in extendsFix"
         :is="page"
-        :key="page.key || page.name"
+        :key="index"
         v-bind="{ ...unrecognizedListeners, ...page.onsNavigatorProps }"
       ></component>
     </slot>
@@ -36,6 +36,18 @@
       };
     },
 
+    computed: {
+      extendsFix() {
+        // workaround for Vue bug where extends doesn't work with runtime template compilation
+        // https://github.com/vuejs/core/issues/6249
+        return this.internalPageStack.map(page =>
+          page.extends ?
+            {...page, template: page.extends.template} :
+            page
+        );
+      }
+    },
+
     methods: {
       isReady() {
         if (this.hasOwnProperty('_ready') && this._ready instanceof Promise) {