fix(nav-link): opt-out of vue reactivity for component binding (#3113)

Co-authored-by: David Kagiri <davykiash@gmail.com>
ionic-team · Sep 11, 2023 · af6249f · af6249f · vercel · Sep 11, 2023
1 parent bb90741
commit af6249f
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 6 deletions.
diff --git a/static/usage/v6/nav/nav-link/vue/example_vue.md b/static/usage/v6/nav/nav-link/vue/example_vue.md
@@ -4,14 +4,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
   export default {
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };

diff --git a/static/usage/v6/nav/nav-link/vue/page_one_vue.md b/static/usage/v6/nav/nav-link/vue/page_one_vue.md
@@ -14,14 +14,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };

diff --git a/static/usage/v6/nav/nav-link/vue/page_two_vue.md b/static/usage/v6/nav/nav-link/vue/page_two_vue.md
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };

diff --git a/static/usage/v7/nav/nav-link/vue/example_vue.md b/static/usage/v7/nav/nav-link/vue/example_vue.md
@@ -4,14 +4,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonNav } from '@ionic/vue';
   import PageOne from './PageOne.vue';
 
   export default {
     components: { IonNav },
     data() {
       return {
-        component: PageOne,
+        component: markRaw(PageOne),
       };
     },
   };

diff --git a/static/usage/v7/nav/nav-link/vue/page_one_vue.md b/static/usage/v7/nav/nav-link/vue/page_one_vue.md
@@ -14,14 +14,15 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton } from '@ionic/vue';
   import PageTwo from './PageTwo.vue';
 
   export default {
     components: { IonHeader, IonTitle, IonToolbar, IonContent, IonNavLink, IonButton },
     data() {
       return {
-        component: PageTwo,
+        component: markRaw(PageTwo),
       };
     },
   };

diff --git a/static/usage/v7/nav/nav-link/vue/page_two_vue.md b/static/usage/v7/nav/nav-link/vue/page_two_vue.md
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts">
+  import { markRaw } from 'vue';
   import {
     IonHeader,
     IonTitle,
@@ -42,7 +43,7 @@
     },
     data() {
       return {
-        component: PageThree,
+        component: markRaw(PageThree),
       };
     },
   };