vue使用ts语法定义数组在v-for中出现变量未定义错误

出错代码：

image.png
image.png

<template>
<div>
  <el-row>
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
          <!-- 年 -->
          <el-select  v-model="year" placeholder="请选择年">
              <el-option  v-for="item in yearList"  :value="item">
              </el-option>
          </el-select>

          <!-- 月 -->
          <el-select  v-model="month" placeholder="请选择月" @change="changeMonth">
              <el-option  v-for="item in monthList"  :value="item">
              </el-option>
          </el-select>

          <!-- 日 -->
          <el-select  v-model="day" placeholder="请选择日">
              <el-option   v-for="item in dayList" :value="item">
              </el-option>
          </el-select>
<!--          <el-select v-model="value" placeholder="请选择日期" style="margin-right: 10px" >-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :value="item.label">-->
<!--              </el-option>-->
<!--          </el-select>-->
          <el-button icon="el-icon-search" circle ></el-button>
      </div>
    </el-col>
  </el-row>
  <div v-loading="loading" :style="'height:'+ height">
    <iframe :src="src" frameborder="no" style="width: 100%;height: 100%" scrolling="auto" />
  </div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
// type subOption = {value: string,label: string}
@Component
export default class ureport extends Vue {
    src: string = "/ureport/designer";
    loading: boolean = true;
    height: string = document.documentElement.clientHeight - 94.5 + "px;";
    value: string = '';
    year: number = 2021;
    month: number = 1;
    day: number = 1;
    yearList: Array<number>;
    monthList: Array<number>;
    dayList: Array<number> ;
    // options: Array<subOption> = [{
    //       value: '选项1',
    //       label: '2017'
    //     }, {
    //       value: '选项2',
    //       label: '2018'
    //     }, {
    //       value: '选项3',
    //       label: '2019'
    //     }, {
    //       value: '选项4',
    //       label: '2020'
    //     }, {
    //       value: '选项5',
    //       label: '2021'
    //     }];
    mounted() {
      setTimeout(() => {
        this.loading = false;
      }, 230);
      const that = this;
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 94.5 + "px;";
      };
        this.initYearList();
        this.initMonthList();
    }

    //  循环年
//  可以给定自己想要年份的范围，我这里给的是现在年份的后十年
    initYearList(){
        let a = new Date()
        let year = a.getFullYear()
        for (let i =0;i<=10;i++){
            this.yearList[i] = year + i
        }
    }
    //循环月
    //一年只有12个月
    initMonthList(){
        let b = new Date()
        this.month = b.getMonth()+1
        this.check(this.month)
        for(let i=0;i<this.day;i++){
            this.dayList[i] = i+1
        }
        for(let i=0;i<12;i++){
            this.monthList[i] = i+1
        }
    }
    //月份改变时
    changeMonth(){
        this.dayList = []
        let a =this.month
        this.check(a)
        for(let i=0;i<this.day;i++){
            this.dayList[i] = i+1
        }
    }
    // 这里是一个判断月份返回相应天数的函数
    check(a){
        if(a==1||a==3||a==5||a==7||a==8||a==10||a==12){
            return this.day=31
        }else if(a==4||a==6||a==11||a==9){
            return this.day=30
        }else if(a==2){
            if(this.year%4==0 && (this.year%100!=0||this.year%400 ==0)){
                return this.day=29
            }else{
                return this.day=28
            }
        }
    }
}
</script>
<style scoped>
  .bg-purple-dark {
    background: #99a9bf;
  }
</style>

image.png