vue 使用this.$refs[‘表单名‘]清空表单数据没效果（注意添加prop属性）

最新推荐文章于 2024-09-10 14:04:43 发布

原创最新推荐文章于 2024-09-10 14:04:43 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

博客围绕Vue应用场景展开，在使用Vue的el - form填写表单时，点击确认或取消按钮后，希望下次打开表单为空。强调给表单加ref属性、el - form - item加prop属性，否则无法清空表单，还提到在左下角按钮绑定事件并传表单名字。

部署运行你感兴趣的模型镜像

应用场景: 在使用vue的el-form填写表单数据, 在点击确认或者取消按钮后,希望下一次再打开表单时,表单是空的。

表单如下：
在这里插入图片描述

在这里插入图片描述

这里需要注意要给表单加上ref属性，并且在el-form-item 加上prop属性，否则会导致清空不了表单

在左下角两个按钮下绑定事件**（事件传参为表单名字）**：
在这里插入图片描述

在这里插入图片描述

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

图片生成

Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

d_append

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Vue3 + ElementUI】表单校验无效（写法：this.$refs[‘formName‘].validate((valid) =＞{} )）

weixin_47375144的博客

04-09

3341

el-form 中校验，校验无效

elementUI中el-form-item的prop如何绑定多个变量，el-form-item使用两个prop，this.$refs[formName].resetFields()重置时间框

坏蛋阿土的博客

10-05

4974

想要清空表单数据，可以使用**this.$refs[‘form’].resetFields()**方法。然后就可以使用this.$refs[‘form’].resetFields()重置这连个表单项了。但是清空这个日期的时候只有一个el-form-item可以进行数据双向绑定。而且要清空的表单项要满足以下形式才能使用resetFields()那么这时候就不要一个prop绑定多个变量了，思路不对。也就是一定要有prop 和 v-model。每个el-col下面再。

参与评论您还未登录，请先登录后发表或查看评论

vue3+elementPlus：无法清空问题，清空表单没效果

肖肖肖丽珠的博客

08-22

933

el-input v-model="filters.idCard" placeholder="请输入身份证号码" clearable /><el-input v-model="filters.idCard" placeholder="请输入身份证号码" clearable /><el-button type="primary" @click="search"> 查询</el-button><el-button type="primary" @click="search"> 查询</el-button>

Vue表单重置，条件清空。this.$refs[name].resetFields()；

天青色等烟雨

09-06

2601

Vue表单重置，条件清空。this.$refs[name].resetFields(); 需要注意的是在form表单中，要添加【prop】代码如下 <template> <div> <Form ref="formItem" :model="formItem" :label-width="80" inline> <FormItem label="名称" prop

resetFields 无法清空数据

u012174809的专栏

12-21

1232

做到这三步就能清除并初始化为data里的数据,缺一不可。 1.在 el-form表单里写上 ref="ruleForm" //名字随意 2.在每个表单项写上 prop="name" <el-form-item :label="$t('common.name')" prop="name"> <el-input v-model="ruleForm.name" style="width:100%"></el-input> </

this.$refs的使用无效

qq_40029822的博客

10-08

2812

this.$refs的使用无效情况

vue重置表单项失效

solo_1108的博客

03-27

1403

vue表单重置数据失效表单formName中数据，利用this.$refs[formName].resetFields()方法，清空数据，但不执行。原因 el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。 html代码 <el-form ref="dynamicValid...

this.$refs.commissionForm.resetFields(); 把我在详情页面的数据带入新增呢

10-11

根据引用内容，`this.$refs.commissionForm.resetFields()` 无法清空表单的主要原因是 **重置时机错误** 和 **初始值设置问题**。以下是具体分析和解决方案： --- ### 问题原因分析 1. **初始值锁定问题**： - `...

`this.$refs.form.validateField()` 和 `clearValidate()` 有什么区别？何时使用？

最新发布

11-25

`this.$refs.form.validateField()` 和 `clearValidate()` 是 Vue + iView（或 View UI）/iView-like 表单组件中用于**手动控制表单验证状态**的两个关键方法。它们用途不同，但常配合使用。 --- ### ✅ 1. `...

resetForm(formName) { this.$refs[formName].resetFields();什么意思

07-06

- **`this[formName] = {}` 的用途**：单独使用 `resetFields()` 无法清空数据模型，因此添加这一步可将绑定的数据对象设为空对象，实现“完全置空”。 #### 4. **注意事项** - **必须添加 `prop` 属性**：每个 `...

使用resetFields点击取消时，没有清空「el-form」的内容

YHY的日常

07-07

1117

原因：没有添加prop，所以resetFields没有生效 1.正解 <template> <el-dialog title="收货地址" :visible.sync="dialogFormVisible" class="taskDialog" :close-on-click-modal="false" :append-to-body="true">

vue form表单验证清除

m0_59735348的博客

09-12

1225

vue form表单验证清除

vue的 v-model无法清空问题使用Vue.$refs清空

qq_34631220的博客

10-08

2632

<textarea style="z-index: -1;" type="text" v-model="text" ref="inputText" autofocus="autofocus" :focus="focus" @blur="poinblur" class="cdj_input"/> 使用它清空 Vue.$refs.inputText.value ='';

vue使用ref调用子组件内部方法及子组件调用父组件方法，循环清空对象的值。

qq_41792374的博客

06-20

1033

// 外层父组件，文件一 <van-icon name="cross" @click=" nocheck = false;// x图标关弹窗 $refs.nochecks.resetData();//2.$refs.nochecks调用组件nocheck的方法，清除数据。 " /> <nocheck ref="nochecks" //1。给组件加ref

Vue3:重新赋值来“清空”这个引用ref([])

weixin_73060959的博客

09-10

2046

在 Vue 3 中，如果你使用了 Composition API，特别是ref来创建一个响应式的引用（在这个例子中是一个数组），你可以通过简单地重新赋值来“清空”这个引用。但是，要注意的是，当你这样做时，你实际上是在替换整个引用，而不是仅仅清空数组的内容。这可能会导致依赖于该引用的任何计算属性或侦听器被重新评估，因为它们会检测到引用的变化（即新的内存地址）。然而，如果你只是想要清空数组的内容而不是替换整个引用，你可以直接修改数组的内容。

Vue开发日志：清空表单数据

HadesNyx

03-15

3143

对于Element UI等具有内置表单清空功能的库（第二种情况），使用自定义的清空函数可能不会触发表单控件的相应更新。如果表单数据对象中包含不需要清空的关联数据（如联动下拉框的选项数据），递归清空所有属性可能导致这些额外的数据也被意外清除。因此，在面对不同的表单场景时，应选择最适合且最简洁的方法来实现表单数据的清空，避免引入不必要的复杂性和风险。在Vue.js中，清空表单数据的方法可以根据你的表单绑定和使用的组件库有所不同。memo:这种方法的本质是，先引用准备好的方法，在合适的时机调用。

form this.$refs[formName].validate() this.$refs.form.clearValidate() 表单验证清除表单验证局部验证取消局部验证

xiaoheisboy的博客

04-19

9056

form this.$ refs[formName].validate() this.$refs.form.clearValidate() 表单验证清除表单验证局部验证取消局部验证废话不多say 上代码 ????记得点赞哦 ???? ????大佬请看???? 你的form标签里加 :rules=“rules” （rules是校验规则）对于需要校验的值增加 prop 提交案件要写成： @click=“asd(‘formName’)” （不再说明方法不动看element文档

this.$refs.xxx.resetFields() 重置清处表单内容

天天写代码

09-24

1031

<el-form :model="addUserForm" ref="addUserFormRef" :rules="addUserFormRules" label-width="100px"> <el-form-item label="名称" prop="name" size="medium"> <el-input v-model="addUserForm.name" placeholder="请输入" clearable><.

Vue xxx.resetFields(）表单重置方法失效 2021年11月10日

weixin_43643765的博客

11-10

839

这是重置按钮 <el-button type="warning" icon="el-icon-remove" @click="resetForm('borrowBooksForm')" >重置</el-button > 这是method中的重置方法 resetForm(formName) { this.$refs[formName].resetFields();