我的问题是,在应用程序从服务器后端获取一些数据后,我的 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 以某种方式仅在识别对已初始化的空数组的更改而不是当前未初始化的餐厅对象时才更新 DOM。
我进一步得到一个警告:
[Vue warn]: Property "restaurant" was accessed during render but is not defined on instance.
关于v-if
我觉得奇怪的东西,因为这就是它存在的确切原因。我需要如何初始化餐厅,以便通过 axios 的更新被 vue 正确识别?