Vue.js 中父组件使用 el-date-picker 时，为何 @input 事件在未选择日期时频繁触发？

Question

Vue.js 中父组件使用 el-date-picker 时，为何 @input 事件在未选择日期时频繁触发？

Healer

12

发布于
10 月 23 日浙江

新手上路，请多包涵

vue 父子组件间
父组件引入子组件el-date日期
子组件日期上绑定了@input='handleInput('datetime',$event)',
现在只要点击el-date框，时间都未选择就一直触发@input

尝试查阅AI，AI提示我更改为@change ，可@change根本不生效。

vue.js

阅读 667

AI BotBETA

在 Vue.js 中使用 Element UI 的 el-date-picker 组件时，遇到 @input 事件频繁触发的问题通常与 el-date-picker 的内部实现和事件派发机制有关。@input 事件在 Element UI 的日期选择器组件中通常用于响应用户输入（包括日期选择、输入框内容变化等）。然而，当你仅点击日期选择器而没有选择日期时，@input 事件可能由于内部状态的变化（如打开/关闭选择器）而被触发。

解决方案

使用 @change 代替 @input：
你提到尝试使用 @change 但它不生效。这可能是因为你的 Element UI 版本或配置问题。@change 事件通常是在用户选择了不同的日期后触发的，而不是在每次内部状态变化时都触发。确保你的 Element UI 版本支持 @change 事件，并且该事件在你的环境中是正确配置的。
示例代码：
```
<el-date-picker v-model="value" @change="handleChange"></el-date-picker>
```
```
methods: {
  handleChange(value) {
    console.log('Selected date:', value);
  }
}
```
检查 Element UI 版本：
确保你使用的 Element UI 版本是最新的，或者至少是支持 @change 事件的版本。可以通过查看 Element UI 的官方文档或更新日志来获取这些信息。
使用 @visible-change 事件：
如果你需要处理日期选择器打开或关闭的事件，可以考虑使用 @visible-change 事件。这个事件会在日期选择器的可见性发生变化时触发。
示例代码：
```
<el-date-picker v-model="value" @visible-change="handleVisibleChange"></el-date-picker>
```
```
methods: {
  handleVisibleChange(val) {
    console.log('Picker visibility:', val);
  }
}
```
检查是否有其他事件或逻辑干扰：
确保没有其他事件或逻辑（如自定义指令、监听器或其他组件的交互）干扰到 el-date-picker 的行为。
查阅文档和社区：
如果问题依然存在，建议查阅 Element UI 的官方文档或相关社区（如 Stack Overflow、GitHub Issues）以获取更多帮助。

总结

通常，@input 事件在 el-date-picker 中的频繁触发是由于其内部实现细节造成的。如果你需要在用户选择新日期时触发事件，使用 @change 是更合适的选择。如果 @change 不生效，请检查你的 Element UI 版本和配置，或考虑使用其他相关事件（如 @visible-change）来满足你的需求。

1 个回答

得票最新

Seven

588116

发布于
10 月 23 日广东

<el-date-picker
  v-model="date"
  type="datetime"
  @change="handleInput('datetime', $event)"
></el-date-picker>

查看全部 1 个回答

推荐问题

Vue.js 中父组件使用 el-date-picker 时，为何 @input 事件在未选择日期时频繁触发？

解决方案

总结

不同页面之间可以通过localstorage保存响应式吗？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

相同的HTML代码，用v-html与直接写在模板中染相表现差异巨大，如何规避？

vite项目如何导入.pem公钥更规范？

使用vue-pdf本地浏览器使用chrome移动机型可以正常预览，但是到了线上就无法正常预览了?

移动端切换路由后返回，视频启动播放会严重滞后，好怪？