基于 Vuejs typescript 类的组件无法从外部 api 更新数据

Question

我将 VueJS 与 Typescript 和基于类的组件一起使用。我有以下代码给我

[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"

UpcomingExams.vue

<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>

我试图通过删除 @Prop() 装饰器将 Prop 切换为 data。这会导致以下错误：

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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

显然，我正在用砰的一声初始化它。我不知道出了什么问题。

Answer 1

在摸索了大约一个小时后，我发现由于某种原因，bang 初始化不能很好地与 Vue 配合使用。将upcomingexams 的声明切换为

upcomingexams: Exam[] = []; 让它工作。