Vue Class 组件 属性 未在实例上定义

Vue Class Component property not defined on instance

我的问题是我的 UI 在应用程序从服务器后端获取一些数据后不知何故没有更新。

我有以下代码:

<template>
  <div v-if="restaurant">
    <div class="center logo-container">
        <img class="img-fit" v-bind:src="'/api/restaurant/logo/' + restaurant.id" alt=""/>
    </div>
    <h2 class="title center dm-text-header">{{ restaurant.name }}</h2>
    <h4 class="subheading center">{{ restaurant.address.street }}, {{ restaurant.address.city }}</h4>     
  </div>
</template>

<script lang="ts">
import axios from 'axios';
import { Options, Vue } from "vue-class-component";
import { Tag } from "./Tag";
import { Restaurant } from "./Restaurant";

@Options({
  props: {
  }
})
export default class Menu extends Vue {  
  // hardcoded for testing 
  restaurantId =  "8ykw9ljq";   

  tagUrl = "/api/menu/" + this.restaurantId + "/tags";
  restaurantUrl = "/api/restaurant/" + this.restaurantId;

  restaurant!: Restaurant;
  tags: Tag[] = [];

  mounted() {
    // get tags
    this.getTags();
    // get restaurant
    this.getRestaurant();
  }

  getRestaurant(): void {
    axios.get<Restaurant>(this.restaurantUrl)
    .then(res => {
      this.restaurant = res.data;
    });
  }

  getTags(): void {
    axios.get(this.tagUrl)
    .then(res => {
      this.tags = res.data;
    });
  }

}
</script>

我验证了后端确实为正确的餐厅提供服务,并在 axios 调用完成后记录了结果。问题是 DOM 没有更新。如果我将以下内容添加到 DOM 更新:

<template>
...
  <div>
    {{tags}}
  </div>
<template>

在我看来,如果 vue 识别出对已经初始化的空数组的更改,而不是当前未初始化的餐厅对象的更改,则 vue 仅以某种方式更新 DOM。

我进一步收到警告: [Vue warn]: Property "restaurant" was accessed during render but is not defined on instance.v-if 上我觉得有点奇怪,因为这正是它存在的确切原因。我需要如何初始化餐厅,以便 vue 正确识别通过 axios 进行的更新?

尝试使用 null 的 Typescript union:

restaurant: Restaurant | null = null;

来自 Vue Class 组件 docs:

Note that if the initial value is undefined, the class property will not be reactive which means the changes for the properties will not be detected

To avoid this, you can use null value or use data hook instead:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  // `message` will be reactive with `null` value
  message = null

  // See Hooks section for details about `data` hook inside class.
  data() {
    return {
      // `hello` will be reactive as it is declared via `data` hook.
      hello: undefined
    }
  }
}