Вот пример моего кода .VUE в TS:
<template>
<div class="card-columns" >
<span>{{ weatherResults }}</span>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Provide } from 'vue-property-decorator';
import IWeatherForecast from './WeatherForecast';
@Component
export default class VsResults extends Vue {
@Prop()
data?: IWeatherForecast;
get weatherResults() {
return this.data;
}
}
</script>
<style lang="scss" scoped>
@import './vs-results.scss';
</style>
Декларация IWeatherForecast:
export default interface IWeatherForecast {
cod: string;
message: number;
cnt: number;
list: List[];
city: City;
}
Когда я заменяю {{weatherResults}} на {{weatherResults.city}}, я начинаю получать странную ошибку в журнале Chrome:
[Vue warn]: ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'city'
из неопределенного "
Хорошо, попытался заменить
{{weatherResults.city}}
с
{{weatherResults? .city}}
Ошибка синтаксического анализа: неожиданный токен.
Что я делаю не так? Как можно избежать этих проблем?