使用element-ui的dialog弹出框组件，弹出框里是一个表单，表单里的日期选择器出现无法显示用户选择的日期。

Question

vue项目使用element-ui的dialog弹出框组件，弹出框里是一个表单，效果如下：

现在的问题是：选择日期之后选中的日期无法显示在输入框中。而且情况是这样的，每次刷新页面之后第一次选择这个到期时间是可以显示在输入框里的，但是第二次开始就又不能显示了！
试过很多改法都不成功，难道是在dialog里面不能正常使用？请大神指导！谢谢
代码截图和源码在下方
!

<el-button type="primary" icon="plus" @click="newDialogVisible = true">新增账号</el-button>

       <el-dialog title="新增账号" v-model="newDialogVisible"  @close="resetForm1('newForm')">
        <el-form :model="newForm"  :rules="rules1" ref="newForm" :label-width="formLabelWidth">
          <el-form-item label="厂家名称" prop="nickName">
            <el-input v-model="newForm.nickName" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="userAccount">
            <el-input v-model="newForm.userAccount" @blur="checkName" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPasswd">
            <el-input v-model="newForm.userPasswd" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="实体店最大数量"prop="maxNumber">
            <el-input v-model="newForm.maxNumber" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
          <el-form-item label="到期时间" prop="useTime">
              <el-date-picker
                v-model="newForm.useTime"
                format="yyyy-MM-dd"
                style="width:70%;"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="newForm.remark" auto-complete="off" style="width:70%;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addAcount('newForm')">保 存</el-button>
          <el-button @click="resetForm1('newForm')">取 消</el-button>
        </div>
      </el-dialog>

//添加（js部分）

addAcount:function(formName){
 let that = this
 that.$refs[formName].validate((valid) => {
      if (valid) {
          that.$http.post(config.URL+'platform/user/add',
          {},
          {
          params:{
             username:that.newForm.userAccount,
             password:that.newForm.userPasswd,
             nickname:that.newForm.nickName,
             freeTime:that.newForm.useTime,
             maxNumber:that.newForm.maxNumber,
             remark:that.newForm.remark
           },
           emulateJSON:true
         })
        .then(
        function(res){
          if (res.body.code==0) {
            that.show();
            that.newForm ={};
            that.newDialogVisible = false
          }
          else{
            Message.error(res.body.statusMsg);
          }
        },
        function(err){
            Message.error('与服务器连接错误！');             
        }) 
      } else {
        console.log('error submit!!');
        return false;
      }
    });

},

Answer 1

在点击datapicker之后，可以先看看newForm.useTime这个数据是否正常？看看是否是watch/computed属性中有对useTime这个值进行更改？
试试把

 if (res.body.code==0) {
            that.show();
            that.newForm ={};
            that.newDialogVisible = false
          }

改成如下形式

 if (res.body.code==0) {
            that.show();
            that.$refs[newForm].resetFields();
            that.newDialogVisible = false
          }

Answer 2

确保日期字段 useTime 已经在 newForm 中声明，即在 data 中， newFrom 不能只是一个 {} 或 undefined，而必须是 newForm: {..., useTime: undefined, ...}。

或者，在需要的地方使用 $set 对 useTime 进行设置。

参见 https://vuejs.org/v2/guide/re...

Answer 3

一般来说是因为userTime没定义好

Answer 4

userTime在newForm里面定义了吗？每次修改的时候，打印newForm.userTime，看下数据正确不正确！
我之前遇到过得就是，工作能正常，但是选择之后不能显示日期。后来检查了，是element（1.2.5）和vue(2.2.4)版本不兼容的问题！你可以参考下