From f0552b366091017bb7a856eca9e3d8acaeff90c8 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Mon, 27 Jun 2022 22:58:10 +0800
Subject: [PATCH] Use conditional props for links in v-list-item (#14124)

---
 app/src/components/v-list/v-list-item.vue | 24 +++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/src/components/v-list/v-list-item.vue b/app/src/components/v-list/v-list-item.vue
index 01b5a7c746..d5faf5d865 100644
--- a/app/src/components/v-list/v-list-item.vue
+++ b/app/src/components/v-list/v-list-item.vue
@@ -2,7 +2,6 @@
 	<component
 		:is="component"
 		class="v-list-item"
-		:to="to !== '' ? to : undefined"
 		:class="{
 			active: isActiveRoute,
 			dense,
@@ -13,9 +12,8 @@
 			nav,
 			clickable,
 		}"
-		:href="href"
 		:download="download"
-		:target="component === 'a' ? '_blank' : undefined"
+		v-bind="additionalProps"
 		@click="onClick"
 	>
 		<slot />
@@ -99,6 +97,24 @@ export default defineComponent({
 			return 'li';
 		});
 
+		const additionalProps = computed(() => {
+			if (props.to) {
+				return {
+					to: props.to,
+				};
+			}
+
+			if (component.value === 'a') {
+				return {
+					href: props.href,
+					target: '_blank',
+					rel: 'noopener noreferrer',
+				};
+			}
+
+			return {};
+		});
+
 		useGroupable({
 			value: props.value,
 			group: props.scope,
@@ -122,7 +138,7 @@ export default defineComponent({
 			return false;
 		});
 
-		return { component, isLink, isActiveRoute, onClick };
+		return { component, additionalProps, isLink, isActiveRoute, onClick };
 
 		function onClick(event: PointerEvent) {
 			if (props.disabled === true) return;