From 5678dc3a255c90309d5d7d9b609f3dc7ec7f9d00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A7=E5=B7=B7=E9=A6=86=E5=AD=90=20=C2=B7=20=E6=B2=88?=
 =?UTF-8?q?=E9=9D=92=E5=B7=9D?=
 <46062972+ShenQingchuan@users.noreply.github.com>
Date: Thu, 11 Feb 2021 09:30:12 +0800
Subject: [PATCH] fix: home action link not being reactive (#195) (#212)

Co-authored-by: mariotang <mariotang@tencent.com>
---
 .../components/NavDropdownLinkItem.vue        |  8 ++++----
 .../theme-default/components/NavLink.vue      | 12 +++++------
 .../theme-default/composables/navLink.ts      | 20 +++++++++----------
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/client/theme-default/components/NavDropdownLinkItem.vue b/src/client/theme-default/components/NavDropdownLinkItem.vue
index 39a31c7b..9ee5bddb 100644
--- a/src/client/theme-default/components/NavDropdownLinkItem.vue
+++ b/src/client/theme-default/components/NavDropdownLinkItem.vue
@@ -9,16 +9,16 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
-const { item } = defineProps<{
+const props = defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
-
-const { props: linkProps, isExternal } = useNavLink(item)
+const propsRefs = toRefs(props);
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item)
 </script>
 
 <style scoped>
diff --git a/src/client/theme-default/components/NavLink.vue b/src/client/theme-default/components/NavLink.vue
index 41d848f4..7497b650 100644
--- a/src/client/theme-default/components/NavLink.vue
+++ b/src/client/theme-default/components/NavLink.vue
@@ -7,16 +7,16 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { defineProps, toRefs } from 'vue'
 import type { DefaultTheme } from '../config'
 import { useNavLink } from '../composables/navLink'
 import OutboundLink from './icons/OutboundLink.vue'
 
-const { item } = defineProps<{
-  item: DefaultTheme.NavItemWithLink
-}>()
-
-const { props: linkProps, isExternal } = useNavLink(item)
+const props = defineProps<{
+  item: DefaultTheme.NavItemWithLink,
+}>();
+const propsRefs = toRefs(props);
+const { props: linkProps, isExternal } = useNavLink(propsRefs.item);
 </script>
 
 <style scoped>
diff --git a/src/client/theme-default/composables/navLink.ts b/src/client/theme-default/composables/navLink.ts
index c9f4d7ac..d35f9b64 100644
--- a/src/client/theme-default/composables/navLink.ts
+++ b/src/client/theme-default/composables/navLink.ts
@@ -1,23 +1,23 @@
-import { computed } from 'vue'
+import { computed, Ref } from 'vue'
 import { useRoute } from 'vitepress'
 import type { DefaultTheme } from '../config'
 import { isExternal as isExternalCheck } from '../utils'
 import { useUrl } from '../composables/url'
 
-export function useNavLink(item: DefaultTheme.NavItemWithLink) {
+export function useNavLink(item: Ref<DefaultTheme.NavItemWithLink>) {
   const route = useRoute()
   const { withBase } = useUrl()
 
-  const isExternal = isExternalCheck(item.link)
+  const isExternal = isExternalCheck(item.value.link)
 
   const props = computed(() => {
     const routePath = normalizePath(route.path)
 
     let active = false
-    if (item.activeMatch) {
-      active = new RegExp(item.activeMatch).test(routePath)
+    if (item.value.activeMatch) {
+      active = new RegExp(item.value.activeMatch).test(routePath)
     } else {
-      const itemPath = normalizePath(withBase(item.link))
+      const itemPath = normalizePath(withBase(item.value.link))
       active =
         itemPath === '/'
           ? itemPath === routePath
@@ -29,10 +29,10 @@ export function useNavLink(item: DefaultTheme.NavItemWithLink) {
         active,
         isExternal
       },
-      href: isExternal ? item.link : withBase(item.link),
-      target: item.target || isExternal ? `_blank` : null,
-      rel: item.rel || isExternal ? `noopener noreferrer` : null,
-      'aria-label': item.ariaLabel
+      href: isExternal ? item.value.link : withBase(item.value.link),
+      target: item.value.target || isExternal ? `_blank` : null,
+      rel: item.value.rel || isExternal ? `noopener noreferrer` : null,
+      'aria-label': item.value.ariaLabel
     }
   })