<el-form >ref数据监测不到的原因

html 复制代码
<template>
  <el-form ref="container">
    <el-form-item>
      <el-input v-model="inputValue" placeholder="请输入内容"></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ElForm, ElFormItem, ElInput } from 'element-plus';

const inputValue = ref('');
const container = ref(null);

onMounted(() => {
  const handleKeydown = (event) => {
    if (event.key === 'Enter') {
      console.log('回车键被按下了!');
    }
  };
  // 通过 $el 获取组件的底层 DOM 元素
  if (container.value && container.value.$el) {
    container.value.$el.addEventListener('keydown', handleKeydown);
  }

  onUnmounted(() => {
    if (container.value && container.value.$el) {
      container.value.$el.removeEventListener('keydown', handleKeydown);
    }
  });
});
</script>

container.value.addEventListener is not a function 错误,是因为 container 作为 el - form 组件的 ref,container.value 拿到的是组件实例,而非原生 DOM 元素,而 addEventListener 是原生 DOM 元素的方法。

你若写成 container.value.addEventListener 就会报错。正确做法是使用组件实例的 $el 属性获取底层 DOM 元素,然后再添加事件监听器。

相关推荐
十里-2 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
左耳咚2 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu3 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
星光一影3 小时前
供应链进销存源码uniapp全开源ERP多仓库管理系统pc+app手机端
mysql·elementui·uni-app·开源·php·phpstorm·1024程序员节
黑云压城After3 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
千里码aicood3 小时前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
用户47949283569155 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在5 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好15 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据5 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析