From b1e0c8ce34a05d7df01a31cb3dbfe754df10fa76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20H=C3=B8vik?= <andehovi@stud.ntnu.no>
Date: Fri, 26 Apr 2024 07:53:06 +0200
Subject: [PATCH] Fix/ fixed the errors in Menu, BudgetBox and Commitment
---
src/components/BaseComponents/Menu.vue | 4 ++--
src/components/Budget/BudgetBox.vue | 7 ++++---
.../Configuration/ConfigurationSteps/Commitment.vue | 10 +++++-----
3 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/src/components/BaseComponents/Menu.vue b/src/components/BaseComponents/Menu.vue
index 2b68b01..332fb5c 100644
--- a/src/components/BaseComponents/Menu.vue
+++ b/src/components/BaseComponents/Menu.vue
@@ -31,7 +31,7 @@
<li v-if="userStore.isLoggedIn" class="nav-item dropdown">
<a class="nav-link dropdown-toggle username-text text-white " href="#" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
- <img src="@/assets/icons/person.svg">{{ userStore.firstname }}
+ <img src="@/assets/icons/person.svg">{{ useUserInfoStore().firstname}}
</a>
<ul class="dropdown-menu dropdown-username-content">
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@@ -64,7 +64,7 @@ import { useUserInfoStore } from '@/stores/UserStore';
const router = useRouter();
-const userStore = useUserInfoStore();
+const userStore : any = useUserInfoStore();
function toHome() {
router.push('/')
diff --git a/src/components/Budget/BudgetBox.vue b/src/components/Budget/BudgetBox.vue
index d3b9852..88de9bb 100644
--- a/src/components/Budget/BudgetBox.vue
+++ b/src/components/Budget/BudgetBox.vue
@@ -21,16 +21,17 @@ const props = defineProps({
// Calculated balance variable
let balance = props.budget - props.expenses
// Reactive variable for determining background color
-const iRef = ref(null)
+const iRef = ref<Element | null>(null);
/**
* Checks if the balance is positive, and depending on the value
* changes background color to green (positive) or red (negative)
*/
onMounted(() => {
- if (balance >= 0) {
+ if (iRef.value !== null && balance >= 0) {
// By default, the background is set to red
- iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
+ const element = iRef.value as HTMLElement;
+ element.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
}
})
diff --git a/src/components/Configuration/ConfigurationSteps/Commitment.vue b/src/components/Configuration/ConfigurationSteps/Commitment.vue
index 05f071e..9c1442a 100644
--- a/src/components/Configuration/ConfigurationSteps/Commitment.vue
+++ b/src/components/Configuration/ConfigurationSteps/Commitment.vue
@@ -12,10 +12,10 @@ emit('changeRouterEvent', '/commitment')
// Reactive variables for form and radio buttons.
const formRef = ref()
-const lowRef = ref('')
-const mediumRef = ref('')
-const highRef = ref('')
-let errorMsg = ref('');
+const lowRef = ref()
+const mediumRef = ref()
+const highRef = ref()
+let errorMsg = ref();
/**
* Validates the commitment form radio buttons and updates the commitment choice in the store.
@@ -30,7 +30,7 @@ const onClick = () => {
if (lowRef.value.checked) choice = 'LITTLE'
else if (mediumRef.value.checked) choice = 'SOME'
else if (highRef.value.checked) choice = 'MUCH'
- useConfigurationStore().setCommitment(choice)
+ useConfigurationStore().commitment(choice)
router.push('/experience')
}
else {
--
GitLab