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

相关推荐
木头没有瓜39 分钟前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
markyankee1013 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
南屿im3 小时前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
青松学前端3 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
杨进军3 小时前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心3 小时前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
流星稍逝3 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js