element-ui的el-date-picker 表单验证时, validator回调参数value始终为undefined

Question

问题描述

问题出现的环境背景及自己尝试过哪些方法

我将代码简化后还是有这个问题：https://codepen.io/kkkiio/pen...

相关代码

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.8.2/lib/index.js"></script>
<div id="app">
  <el-form :model="form" ref="form" :rules="rules">
    <el-form-item label="label" prop="dateRange">
      <el-date-picker v-model="form.valueRange" type="daterange" range-separator="-">
      </el-date-picker>
    </el-form-item>
  </el-form>
</div>

var Main = {
  data() {
    return {
      form: {
        valueRange: [new Date(), new Date()]
      },
      rules: {
        dateRange: [
          {
            type: 'array', 
            required: true,
            trigger: "change",
            validator: (rule, value, cb) =>{
              console.log(rule,value,this.form.valueRange);
              cb(new Error(`value=${value}, dtr=${this.form.valueRange}`));
            }
          }
        ]
      }
    };
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

你期待的结果是什么？实际看到的错误信息又是什么？

validator的value应该是包含Date的数组, 实际上为undefined, 而form.valueRange却有正确的值

Answer 1

rules里的字段名称得和form里面的保持一致。你的一个是dateRange,一个是valueRange