vue el-date-picker 日期选择 回显后成功后无法改变的解决办法

在实现一个前端页面默认时间选择时遇到了手动选择日期无法回显但在浏览器vue插件监控属性时却能看到手动选择的值的问题。

html 复制代码
<el-date-picker
  v-else-if="item.type === 'datetPicker'"
  v-model="form[item.prop]"
  :placeholder="item.placeholder"
  :picker-options="item.pickerOptions"
  type="date"
  value-format="yyyy-MM-dd"
  clearable
/>

在钩子函数默认选择昨天

js 复制代码
  created() {
    this.defaultDate()
  }
  defaultDate() {
     let date = new Date();
     const yesterday = date.setDate(date.getDate() - 1);
     this.form.startDate = this.handleTime(yesterday)
     this.form.endDate = this.handleTime(yesterday)
   },
   handleTime(yesterday) {
     let date = new Date(yesterday);
     const year = date.getFullYear();
     // 获取月份,要加 1,格式化为两位数
     const month = String(date.getMonth() + 1).padStart(2, '0');
     // 获取日期,格式化为两位数
     const day = String(date.getDate()).padStart(2, '0');
     const res = year + '-' + month + '-' + day;
     this.$set(this.form,'startDate', res)
     this.$set(this.form,'endDate', res)
     return res;
   }

加上这两行代码就能解决上述问题了。

js 复制代码
this.$set(this.form,'startDate', res)
this.$set(this.form,'endDate', res)
相关推荐
岳哥i7 分钟前
前端项目接入单元测试手册
前端·单元测试
小彭努力中12 分钟前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
栈老师不回家31 分钟前
Element UI 组件库详解【Vue】
前端·vue.js·ui
前端青山39 分钟前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵1 小时前
什么是Sass,有什么特点
前端·rust·sass
栈老师不回家1 小时前
axios 请求跨域问题
前端·vue.js
前端拾光者1 小时前
前端数据可视化思路及实现案例
前端·数据库·信息可视化
沉默璇年1 小时前
react中Fragment的使用场景
前端·react.js·前端框架
不熬夜的臭宝2 小时前
每天10个vue面试题(九)
javascript·vue.js·ecmascript
前端熊猫2 小时前
transform学习
前端·学习·html