Currently, I am utilizing VueJS alongside Typescript and class-based components. In my code, I encountered a warning that states:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "upcomingexams"Within UpcomingExams.vue file:
<template>
<div class="card">
<ul class="examlist">
<li v-for="exam in upcomingexams" :key="exam.examId">
{{ exam.examId }} on {{ exam.start }}
</li>
</ul>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
export interface Exam {
examId: string;
questions: string[];
correctAnswers: string[];
start: Date;
end: Date;
course: string;
schools: string[];
}
@Component
export default class UpcomingExams extends Vue {
@Prop() upcomingexams!: Exam[];
mounted() {
console.log("UpcomingExams component mounted");
this.getExamsAfterToday();
}
getExamsAfterToday() {
var date = new Date();
fetch("http://localhost:3000/api/queries/Q1?todayDatetime=" + date.toJSON())
.then(response => response.json() as Promise<Exam[]>)
.then(data => (this.upcomingexams = data));
}
}
</script>
I attempted to switch the Prop to data by removing the @Prop() decorator. Unfortunately, this resulted in the following error message:
Property or method "upcomingExams" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.Despite initializing it with the bang, I am unsure of what might be causing this issue.