Vue实战（一）：vue2.0+elementUI 表单提交验证踩过的坑

1、form中以下三个地方一定要注意

要用:model不能用v-model

@click="onSubmit('form')"中参数要加引号

2、data处理

data () {
    return {
      books: [],
      keywords:'',
      currentPage: 1,
      pagesize: 5,
      dialogFormVisible: false,
      form: {
        id: '',
        title: '',
        author: '',
        date: '',
        press: '',
        cover: '',
        abs: '',
        cid: ''
      },
      rules: {
        title: [
          {
          required: true,
          message:'标题不能为空',
          trigger: 'blur'
          },
          {min:5,max:15,message:'长度在5到15个字符之间'}
        ],
        author: [
          {
          required: true,
          message:'作者不能为空',
          trigger: 'blur'
          },
          {min:5,max:15,message:'长度在5到15个字符之间'}
        ]
      },

3、method中处理，其中也是要注意参数的写法‘form’加上引号

onSubmit (form) {
      this.$refs['form'].validate(valid => {
        alert("valid:"+valid);
        if(valid) {
          this.$axios
        .post('/books/addUpdate', {
          id: this.form.id,
          cover: this.form.cover,
          title: this.form.title,
          author: this.form.author,
          date: this.form.date,
          press: this.form.press,
          abs: this.form.abs,
          cid: this.form.cid
        }).then(resp => {
          alert("resp.status:"+resp.status)
          alert("resp:"+resp)
          if (resp && resp.status === 200) {
            this.dialogFormVisible = false
            this.loadbooks()
          }
        })
        } else {
          console.log('Error Submit!!')
          return false
        }
      })
    },