Vue数组循环

之前写一个动态可以增删的表单时,偷懒用的element的组件,导致数据包了好几层,所以为了拿出来进行了如下处理

<script>
//import dataTable from "@/mixins/dataTable.js";
export default {
  //mixins: [dataTable],
  created() {
    this.getYear();
  },
  data() {
    return {
      url: "annualLeave/annualLeaveSets",
      modelForm: {
        domains: [
          {
            value: {
              startYearDate: "0",
              endYearDate: "0",
              restDay: "0",
              restTime: "0"
            }
          }
        ]
      },
      contentForm: {},
      pageSizes: [40, 50, 100, 500, 1000], // 所有可选择的条数
      pageSize: 40 // 控制一页显示的条数
    };
  },

  methods: {
    getYear() {
      this.$http
        .get("annualLeave/annualLeaveSets", {
          page: { pn: 1, size: 40 }
        })
        .then(res => {
          this.modelForm.domains = res.content.content.map(res => {
            return {
              value: res
            };
          });
        })
        .catch(res => {});
    },
    // submitForm() {
    // },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // alert("submit!");
          console.log(this.modelForm);

          this.contentForm = this.modelForm.domains.map(res => {
            return res.value;
          });
          for (var i in this.contentForm) {
            if (
              this.contentForm[i].startYearDate >
              this.contentForm[i].endYearDate
            ) {
              this.$message.error("第二个数字格式有误");
            }
          }
          // console.log(contentForm);
          // return;
          console.log(this.contentForm),
            this.$http
              .postJSON("annualLeave/annualLeaveSets/create", {
                items: this.contentForm
              })
              .then(res => {
                this.$message({
                  message: "保存成功",
                  type: "success"
                });
                this.getYear();
              })
              .catch(res => {
                this.$message.error("保存失败");
              });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.modelForm.domains.indexOf(item);
      console.log(this.modelForm);
      if (index !== -1) {
        this.modelForm.domains.splice(index, 1);
        console.log(this.modelForm);
      }
    },
    addDomain() {
      this.modelForm.domains.push({
        value: {
          startYearDate: "0",
          endYearDate: "0",
          restDay: "0",
          restTime: "0"
        }
      });
    }
  }
};
</script>

对于数组的循环这样写

 this.contentForm = this.modelForm.domains.map(res => {
            return res.value;
          });
          for (var i in this.contentForm) {
            if (
              this.contentForm[i].startYearDate >
              this.contentForm[i].endYearDate
            ) {
              this.$message.error("第二个数字格式有误");
            }
          }
原文地址:https://www.cnblogs.com/vivin-echo/p/13948845.html