<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 元素,然后再添加事件监听器。

相关推荐
zero13_小葵司15 分钟前
在Vue项目中构建后端配置的动态路由及权限控制体系
前端·javascript·vue.js
GISer_Jing15 分钟前
前端框架篇——Vue&React篇
前端·javascript
子兮曰21 分钟前
WebSocket 连接:实现实时双向通信的前端技术
前端·javascript·websocket
羊羊小栈2 小时前
基于「YOLO目标检测 + 多模态AI分析」的光伏板缺陷检测分析系统(vue+flask+模型训练+AI算法)
vue.js·人工智能·yolo·目标检测·flask·毕业设计·大作业
jump_jump3 小时前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP4 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia4 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
光影少年4 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿4 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot