解决vue2升级vue3后,输入框无法输入的问题

简介: 解决vue2升级vue3后,输入框无法输入的问题

一、问题

vue2升级为vue3的语法,代码原封不动的复制过来,结果测试的时候发现在输入框中无法输入。

代码如下:

<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px">
  <el-form-item label="备注" prop="remark">
    <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入"/>
  </el-form-item>
</el-form>

二、解决方案

解决这个问题有两种方法,

一、是在输入框中加入@input事件

如:

<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入" @input="handleInput"/>
funtion handleInput(e){
  form.value.remark = e.target.value
}
二、把form的ref名称换掉,不要与form重复

如:

<el-form ref="editForm" :model="form" :rules="rules" label-width="80px" style="margin-top: 20px">
  <el-form-item label="备注" prop="remark">
    <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入"/>
  </el-form-item>
</el-form>
相关文章
|
1天前
|
JavaScript 定位技术 API
在 vue3 中使用高德地图
在 vue3 中使用高德地图
8 0
|
1天前
vue3 键盘事件 回车发送消息,ctrl+回车 内容换行
const textarea = textInput.value.textarea; //获取输入框元素
9 3
|
4天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
14 0
|
4天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
4天前
|
JavaScript 前端开发 安全
Vue3官方文档速通(下)
Vue3官方文档速通(下)
15 0
|
4天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
20 0
|
4天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
26 0
|
4天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
16 0
|
5天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
5天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期