Vue3 form表单赋值后，input输入框无法输入

已于 2024-08-01 15:20:47 修改
阅读量919 收藏
点赞数 3
文章标签： vue.js
于 2024-08-01 15:17:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39691676/article/details/140848158
版权

1.使用reactive初始化数据: 需要用一个对象包裹数据,使其变成响应式数据

![reactive](https://i-blog.csdnimg.cn/direct/cbb3831b88544f30bae546f1a4615ae2.pngForm表单及JS中的使用都需要 “paramr.formUser” 进行调用
原因: 使用reactive生成的响应式数据，在直接赋值时把响应式数据给替换为了普通数据了，导致无法监听数据的变化。

2. 在表单验证中, ref 与 model 如果使用同一个变量,也可能造成输入框无法输入的情况在这里插入图片描述

3.使用get

在这里插入图片描述
在这里插入图片描述4.使用toRefs分别给对象属性赋值(不建议)

 const { name, age, sex, date, addr } = toRefs(props.childData.row)
Mr.app
关注
Vue3+elementPlus 输入框无法输入问题
朝花夕拾的博客
05-15 949
ref和modal的名称不能一致 换个值就ok了。
Vue2踩坑记录 - el-input无法接收键盘输入，对响应式对象的深入理解-对象和数组的响应式
l_q_l的专栏
09-11 1178
今天发现，某对话框打开后，其中的input无法接收键盘输入，我在页面上劈里啪啦敲了一堆，页面输入框空空如也，的确是用了v-model来实现双向绑定。那么，双向数据传输除了使用v-model之外，还有其他的条件么？我这个正好是一个form表单中的控件，绑定的是一个对象中的属性：form.projectName。但是，我写了个reset函数，其中重新定义了一个form对象，覆盖了data中的form。1、使用对form中对象属性赋值为null的方法来重置，而不是重新定义form对象。
Vue3、Element Plus使用v-for循环el-form表单进行校验
m0_67584973的博客
06-13 3141
在开发中遇到了这样一个需求有一个form是通过v-for生成出来的，并且数量不确定，每个表单中的字段都需要做校验，就将自己的解决方法记录了下来。
vue3+element-plus 表单输入框无法输入
veceny的博客
03-12 4650
【代码】vue3+element-plus 表单输入框无法输入。
vue表单已经赋值了，但是还是返回async-validator “xxx is required“提示，弹出验证红字而且不能输入
最新发布
qq_45067263的博客
03-05 1280
首先检查一下你的验证规则是否正确。Vue 表单验证通常是用 rules 来设置的。如果字段值已经赋值，但仍然提示必填项错误，可能是规则写得有问题。你可以确保 xxx 字段的验证规则中 required 设置是正确的。先确认字段值有没有初始化，也就是form里该字段有没有写上，先初始化rules: {xxx: [{ required: true, message: '联系人不能为空', trigger: 'blur' },// 其他验证规则。
Vue表单项赋值后无法输入问题解决
PorkCanteen的博客
05-02 1287
v-model。
关于vue3使用Element ui输入框无法输入的简单解决方法
u010518531的博客
07-04 2232
这应该是解决element ui输入框无法输入最简单有效的方法了。
解决vue2升级vue3后，输入框无法输入的问题
一只没有脚的鸟
11-15 1766
vue2升级为vue3的语法，前端代码原封不动的复制过来，结果测试的时候发现在输入框中无法输入，介绍两种解决方法
Vue3 Element plus的el-input组件无法输入问题
SomeBodyL的博客
08-07 625
一个Vue3项目，在写登录界面的时候，使用了Element Plus的el-input组件，发现无法输入，以下是源码。将 :model 改为 v-model 就可以了。
Vue 实现把表单form数据 转化成json格式的数据
10-16
在这个例子中，`name`和`email`是我们在Vue实例中定义的数据属性，它们会随着表单中对应输入框的值发生变化而实时更新。 然而，有些表单字段可能不是简单文本输入，例如图片上传，此时我们需要额外处理。例如，对于...
Vue -- 表单下的input框无法输入内容 & 实现自动布局三等分的基于 el-form 的动态表单 & el-select 简单实践
支棱起来
05-03 1747
<el-row> <el-col :span="8" style="margin-top:15px;"> <el-form-item :label="$t('labels.deployTemp')" prop="templateName"> <el-input v-model="item.templateName" :disabled="tr...
vue 表单输入格式化中文输入法异常问题
10-18
v-model 是 vue.js 提供的语法糖，根据不同的表单控件监听不同的事件，实现对表单控件的数据双向绑定。这篇文章主要介绍了vue 表单输入格式化中文输入法异常,需要的朋友可以参考下
vue给form表单赋值
05-24
在 Vue 中给表单赋值，可以使用 `v-model` 或者直接给表单元素绑定 `value` 属性来实现。 假设有一个表单，包含两个输入框：用户名和密码。可以先定义一个对象，用于存储表单数据： ```javascript data() { ...
vue3中el-input输入无效的原因之一：reactive赋值响应式问题
dlchgg的博客
03-07 1499
reactive的数据不能这么赋值，会破坏响应性。
vue3 input无法输入怎么解决？
xuanqinzi的博客
07-26 628
vue3在子组件里嵌套子组件，进入该组件后里面的input和select都无法输入和选择的，这时候点击跳转其他页面时其他的页面input全都失效了无法输入，请问大佬们怎么解决，我看网上很多说给input使用change事件在执行this.$forceUpdate()，试过了没用，连change事件都不会执行。
Vue3中使用form的坑！ 会导致表单所有的框都不能输入，element puls ui组件库的el-form，输入无效的问题
weixin_45776545的博客
07-04 292
我先是这样写的 model和 ref 的值一样了 然后就导致了 整个表单都锁住了 这2个值修改成不同的值就可以正常使用了
vue3 element plus el-input 无法输入问题
热门推荐
supming1的专栏
11-11 1万+
最近用vue3 elementplus进行开发，发现el-input无法输入，代码如下： <template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...
vue3+el-form表单输入响应式失效问题
nowfuture的博客
05-29 737
中使用el-form时，如果el-form节点的ref属性和model属性同名，会导致输入框无法输入，选择框无法选择，代码如下。修改的办法是：修改成不同的名字就可以解决。
vue .input赋值之后input框无法输入，或者和其他input框错位，校验延迟
weixin_42575505的博客
01-10 2076
如果在 Vue 中使用 v-model 指令给 input 框赋值之后，input 框无法输入或者和其他 input 框错位，有可能是因为 v-model 指令在给 input 框赋值之前导致了错误。 这种情况常常发生在在父组件和子组件之间传递数据时，由于数据在父组件和子组件之间的渲染延迟导致的。 要解决这个问题，可以使用 v-model.lazy 指令，或者在赋值时使用 $nextTick 方法...
vue3表单字段赋值清空
02-19
### Vue3 表单字段赋值和清空 #### 使用 `reactive` 和 `ref` 在 Vue 3 中，表单字段可以通过 `reactive` 或者 `ref` 来定义并管理其状态。为了实现表单字段的赋值和清空操作，通常会保存一份原始数据副本用于重置。 当使用 `reactive` 定义响应式对象时，可以直接通过重新分配整个对象来进行初始化设置或清除操作[^2]： ```javascript import { reactive, toRefs } from &#39;vue&#39;; // 原始数据模板 const formDataTemplate = { name: &#39;&#39;, email: &#39;&#39; }; // 初始化表单数据 let formData = reactive({ ...formDataTemplate }); function resetFormData() { Object.assign(formData, formDataTemplate); } ``` 对于单独的输入控件，则可以利用 `ref` 进行更细粒度的操作: ```javascript import { ref } from &#39;vue&#39;; // 单独定义每个字段作为 refs const userName = ref(&#39;&#39;); const userEmail = ref(&#39;&#39;); function clearInputFields() { userName.value = &#39;&#39;; userEmail.value = &#39;&#39;; } ``` #### 组件内部处理 如果是在组件内完成这些功能，可以在 setup 函数里声明上述变量以及相应的方法，并将其暴露出去供模板或其他地方调用。 ```html <template> <!-- 省略其他 HTML 结构 --> <form @submit.prevent="handleSubmit"> <label>Name:</label><input v-model="userName" /> <label>Email:</label><input v-model="userEmail" /> <button type="reset" @click="clearInputFields">Clear</button> <button>Submit</button> </form> </template> <script lang="ts"> export default defineComponent({ setup() { const userName = ref(&#39;&#39;); const userEmail = ref(&#39;&#39;); function handleSubmit() {/* 处理提交 */} function clearInputFields() { userName.value = &#39;&#39;; userEmail.value = &#39;&#39;; } return { userName, userEmail, handleSubmit, clearInputFields }; } }); </script> ``` 以上展示了如何在一个简单的场景下对 Vue 3 的表单字段执行赋值与清空动作。实际项目可能会更加复杂，涉及到更多类型的输入元素或者其他业务逻辑需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值