记录 vue+iview 踩过的坑

1、iview多选框复选框

前端控制台报错：

代码

• list需要定义为数组
• lable加冒号

2、iview确认密码校验

<Modal v-model="modalPassword" :loading=true :mask-closable="false" @on-cancel="handleReset('resetPassword')">
      <div slot="header">
        <span>重置密码</span>
      </div>
      <Form :model="resetPassword" ref="resetPassword" :rules="ruleValidate" :label-width="120">
        <FormItem label="新密码" prop="Firstpassword">
          <Input v-model="resetPassword.Firstpassword"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="Secondpassword">
          <Input v-model="resetPassword.Secondpassword"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="handleReset('resetPassword')">取消</Button>
        <Button type="primary" @click="passwordOk">确定重置</Button>
      </div>
    </Modal>
data() {
    const pwdCheckValidate = (rule, value, callback) => {
      let vm = this;
      if (value == '') {
        return callback(new Error('确认密码不能为空'));
      } else if (value != vm.resetPassword.Firstpassword) {
        return callback(new Error('两次密码不一致'));
      } else {
        callback();
      }
    };
    return {
    resetPassword:{},
    ruleValidate:{
        Firstpassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' },
          { type: 'string', pattern: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '密码由8-20位大小写字母数字组成', trigger: 'blur' }
        ],
        Secondpassword: [
          { required: true, trigger: 'blur', validator: pwdCheckValidate },
          { type: 'string', pattern: /(?![0-9A-Z]+$)(?![0-9a-z]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,20}$/, message: '密码由8-20位大小写字母数字组成', trigger: 'blur' }
        ]
    }
    }
}

注意：

• form表单的model加冒号，model与ref要保持一致
• prop是用于表单校验的，重置表单不加则清除不掉

3、iview重置表单不能用

handleReset(name) {
      let vm = this;
      if (this.$refs[name] !== undefined) {
        this.$refs[name].resetFields();
      }
    }

加一个if判断就可以了

4、校验表单不能用或者报错 “TypeError: Cannot read property ‘validate’ of undefined”

原因：

1：传参不对
2：this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();