最近用vue2.0写了一个高考志愿填报系统，遇到了很多bug，不过最终还是收获满满。以下是我的一些开发心得。

1.用$set过滤不必要的数据

这是接口文档需要post上去的数据

这是渲染页面需要的数据：

对比发现渲染页面多了id和volunteerNumber,这些数据是服务器不需要的，因此需要过滤删除。

但是查了很多资料都没有明确的方法去过滤，因此想到了重新开辟一个postList对象用来存储服务器需要的数据，而此时$set起到了很好的作用。

解决：

async submit() {
      // 将数据处理成服务器需要的数据
      this.postList.batch = this.list.batch;
      this.postList.subject = this.list.subject;
      this.postList.naturePlan = this.list.naturePlan;
      this.postList.year = this.list.year;
      this.postList.grade = this.list.grade;
      for (let i = 0; i < 10; i++) {
          //设置对象，设置第几个，设置什么
          this.$set(this.postList.volunteer, i {
            collegeCode: this.list.volunteer[i].collegeCode,
            volunteer: this.list.volunteer[i].volunteer,
            adjust: this.list.volunteer[i].adjust,
          });
      }
}

但是后来提交数据的时候一直报数据填报异常的错误，最开始只填了一些志愿，并没有把10个志愿全部填写完，问了后端，后端说根据传过来的数组长度去遍历的。重新新建了一个项目，只准备了一个数据，post显示正常。但是原来的项目却一直错误，原来是没有填写的志愿也把空字符串传过去了，后端无法解析就抛出异常，加上判断是否为空即可完美解决。

code:

async submit() {
      // 将数据处理成服务器需要的数据
      this.postList.batch = this.list.batch;
      this.postList.subject = this.list.subject;
      this.postList.naturePlan = this.list.naturePlan;
      this.postList.year = this.list.year;
      this.postList.grade = this.list.grade;
      for (let i = 0; i < 10; i++) {
        if (
          this.list.volunteer[i].collegeCode != "" &&
          this.list.volunteer[i].volunteer != ""
        ) {
          this.$set(this.postList.volunteer, this.postList.volunteer.length, {
            collegeCode: this.list.volunteer[i].collegeCode,
            volunteer: this.list.volunteer[i].volunteer,
            adjust: this.list.volunteer[i].adjust,
          });
        }
      }
}