模板文件中的“意外令牌”

Question

这是我在TS中的.VUE代码的示例：

    <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警告]：渲染错误：“ TypeError：无法读取属性'city'   的不确定”

好，尝试替换

  

{{weatherResults.city}}   与   {{weatherResults？.city}}

• 得到

  

解析错误：意外的令牌。

我在做什么错？如何避免这些问题？