表单对象已经赋上值，但是页面渲染时表单却为空

doSearch() {
      loading.show();
      let id = this.$route.query.id;
      return request
        .get(`/MANAGE/school/querySchoolById/${id}`)
        .then(res => {
          Object.keys(res.data).forEach(key => {
            if (key === 'schooltype' || key === 'schoolcategory') {
              this.searchform[key] = res.data[key] + '';
            } else {
              this.searchform[key] = res.data[key];
            }
          });
          console.log(this.searchform)
        })
        .catch(err => this.$message.error(err.message))
        .finally(() => {
          loading.hide();
        });
    },

data() {
    return {
      activeNames: ['1', '2', '3'],
      searchform: {
        schoolname:'',
        schoolenname:'',
        schooltype:'',
        schoolcategory:'',
        cityname:'',
        jiedao:'',
        door:'',
        zip:''
      },

经过探索，发现在data中为searchform的每个属性赋上初始值后，页面中表单就会成功被渲染，看来想要偷懒在data中直接给出空对象然后取到数据后遍历追加每个属性并赋值是行不通的。