解决vue页面有多个＜el-date-picker＞时点击日期没有反应的问题

最新推荐文章于 2025-06-02 15:01:58 发布

原创最新推荐文章于 2025-06-02 15:01:58 发布 · 2.2k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端 #elementui

文章讲述了作者在Vue页面中使用多个if条件和日期选择器时遇到问题，通过在日期选择器上添加`$forceUpdate()`方法实现页面内容根据角色动态刷新，确保日期选择功能正常工作。

今天写个页面要根据不同的角色显示不同的内容，于是乎用了多个if来控制页面，导致同一个页面还写了多个时间选择器，然后其中一个就不生效了，点击之后没有反应，选择器页面的日期也不更新，最后百度尝试了很多方法，记录一个最简单有效的，直接在属性里添加强制刷新！

<el-form-item v-if="addForm.problemType == '1'"
                          label='期望解决时间'
                          prop="desireDate">
              <el-date-picker v-model="addForm.desireDate"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              type="datetime"
                              @input="$forceUpdate()"
                              width="200px"
                              size="mini"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>