vue为遍历生成的表单设置ref属性

最近在写表单重置的时候出现了问题,在this.$refs[formName].resetFields();的时候卡了很久。
经过网上的搜索终于解决的问题!

对于不需要遍历的表单

这是vue代码:

        <el-dialog title="段落描述" :visible.sync="dialogFormVisible">
          <el-form ref="test" :model="test" label-width="150px">
            <el-form-item prop="subtitle">
              <span slot="label">
                <span style="color:#333;font-size: 16px;"><strong>段落关键词</strong></span>
              </span>
              <el-input v-model="test.subtitle" clearable placeholder="请填写段落关键词"></el-input>
            </el-form-item>
            <el-form-item prop="maxLength">
              <span slot="label">
                <span style="color:#333;font-size: 16px;"><strong>段落最大字数</strong></span>
              </span>
              <el-input v-model="test.maxLength" clearable placeholder="请输入段落最大字数"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('test')">取 消</el-button>
            <el-button type="primary" @click="paragraphDefine">保 存</el-button>
          </div>
        </el-dialog>

这里是js代码:

resetForm(formName) {
    this.$refs[formName].resetFields();
}

要注意的地方:
要设置prop属性,与复制的对象一致。
保证ref的值唯一即可。
在这里插入图片描述

对于需要遍历的表单:

		<el-dialog title="段落描述" :visible.sync="dialogFormVisible">
          <div v-for="(item, index) in numberFormsList" :key="index">
            <el-form :ref="`paragraph${index}`" :model="paragraph[index]" label-width="150px">
              <el-form-item prop="subtitle">
                <span slot="label">
                  <span style="color:#333;font-size: 16px;"><strong>段落{{ index + 1 }}关键词</strong></span>
                </span>
                <el-input v-model="paragraph[index].subtitle" clearable placeholder="请填写段落关键词"></el-input>
              </el-form-item>
              <el-form-item prop="maxLength">
                <span slot="label">
                  <span style="color:#333;font-size: 16px;"><strong>段落{{index+1}}最大字数</strong></span>
                </span>
                <el-input v-model="paragraph[index].maxLength" clearable placeholder="请输入段落最大字数"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('paragraph')">取 消</el-button>
            <el-button type="primary" @click="paragraphDefine">保 存</el-button>
          </div>
        </el-dialog>

vue代码中唯一改变的地方是:

:ref="`paragraph${index}`"

我这里为了保持ref的唯一性,将index作为了后缀
如何重置这个由v-for循环生成的表单呢?

lresetForm(formName) {
   let i = 0;
   while (i < parseInt(this.form.number)) {
     this.$refs['paragraph' + i][0].resetFields();
     i++;
   }
},

注意:这里要加一个[0]
不然就会报错this.$refs.paragraph0.resetFields is not a function

这是因为我们打印一下:

console.log("0ref:", this.$refs['paragraph0']);

这里下面还有一个[0],然后才看得到resetFields()
在这里插入图片描述
对于不是v-for循环生成的表单,打印出来是这样的:

console.log("formref:", this.$refs['form']);

在这里插入图片描述
好了!这样就可以对v-for循环生成的表单进行重置了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/582843.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

从零开始的Dify大模型应用开发指南

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径&#xff1a;AI代理工作流大模型应用开发实用开源项目汇总大模…

【Paddle】PCA线性代数基础 + 领域应用:人脸识别算法(1.1w字超详细:附公式、代码)

【Paddle】PCA线性代数基础及领域应用 写在最前面一、PCA线性代数基础1. PCA的算法原理2. PCA的线性代数基础2.1 标准差 Standard Deviation2.2 方差 Variance2.3 协方差 Covariance2.4 协方差矩阵 The Covariance Matrix2.5 paddle代码demo①&#xff1a;计算协方差矩阵2.6 特…

【方法】PPT文件如何撤销密码保护?

对于重要的PPT文件&#xff0c;很多人会设置密码保护&#xff0c;那后续不需要保护的时候&#xff0c;要怎么撤销密码呢&#xff1f; 首先&#xff0c;我们要看下想要撤销的是什么密码&#xff0c;以及在记得密码或者忘记密码的情况下&#xff0c;处理方式也不同&#xff0c;下…

保证接口幂等性的多种实现方式(数据库方案)

1. 幂等性的概念 接口幂等性是指在软件工程和Web服务领域中&#xff0c;一个接口&#xff08;通常是HTTP API&#xff09;无论被调用一次还是多次&#xff0c;其对系统产生的副作用应该是相同的&#xff0c;即结果保持一致&#xff0c;不会因为多次请求而有所不同。换句话说&am…

nginx--安装

yum安装 官方包链接&#xff1a;nginx: Linux packages 官方yum源链接&#xff1a;nginx: Linux packages 配置yum源 [rootlocalhost ~]# yum install -y nginx [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/$releasever/$basearch/ gp…

嵌入式学习62-C++

知识零碎&#xff1a; 析构函数语法&#xff1a; ~类名(){} 1.析构函数&#xff0c;没有返回值也不写void 2.析构函数是构造函数的反过程 构造函数 在执行过程中的三个过程…

【C++初阶】string

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

客户端连接ZK失败处理方案

文章目录 背景介绍报错信息处理方案第一步、查看zookeeper启动是否正常第二步、检查本地网络是否正常第三步、检查本地JDK版本 对于zookeeper服务注册中心&#xff0c;在前期【 Dubbo框架注册中心-Zookeeper搭建】博客中有环境搭建部署介绍&#xff0c;感兴趣可以参考安装。 背…

第七天 dfs剪枝优化

第七天 dfs剪枝&优化 1可行性剪枝 2最优性剪枝 3重复性剪枝 题 1 输入 5 5 6 …S. XX.X. …X… …D.X …X… 输出 YES —————————————— 题解 #include<iostream> #include<cstdio> using namespace std; const int N 10; int n,m,T; char …

前端入门:HTML(CSS边距,塌陷)

1.CSS边距 auto:浏览器自动计算的边距 length&#xff1a;以px,pt,cm等为单位指定边距&#xff0c;pt代表的是磅&#xff0c;1磅0.376毫米。 %&#xff1a;以父元素宽度的百分比来指定边距。 其中&#xff0c;length和%都可以取负值&#xff0c;表示减少外边距的空间大小。 …

命令执行。

命令执行 在该项目的readme中&#xff0c;描述了怎么去调用的flink 通过java原生的runtime来调用flink&#xff0c;下一步就是去看看具体的调用过程了&#xff0c;是否存在可控的参数 找到具体提交命令的类方法CommandRpcClinetAdapterImpl#submitJob() 这里要确定command&am…

SAP-ERP TM运输管理模块详解-3

9、定义采购数据结算 事务代码及配置路径&#xff1a; TCODE: SPRO 路径&#xff1a;IMG > 后勤执行 > 运输 > 装运成本 > 结算 > 分配采购数据。详见图9-1。 配置路径截图&#xff1a; 、 如图9-2所示&#xff0c;配置根据计划运输点Z001装运成本类型Z001…

国家强制标准来了!契约锁如何帮您合规签署8项特殊作业票

“作业票”是明确现场施工内容、排查作业风险、落实安全措施的授权许可票&#xff0c;也是现场施工作业安全管理的第一道关口。 近年国家应急管理部组织修订的国家标准《危险化学品企业特殊作业安全规范》&#xff08;GB 30871-2022&#xff09;已将“8大特殊作业票”的部分管理…

【机器学习-19】集成学习---投票法(Voting)

一、引言 集成学习&#xff08;Ensemble Learning&#xff09;是机器学习领域中的一种重要策略&#xff0c;它通过结合多个模型的预测结果来提高整体性能。在单个模型容易过拟合或欠拟合的情况下&#xff0c;集成学习能够通过综合多个模型的优点来减少这种风险&#xff0c;从而…

代码量应该和数据结构的学习深度成比例。

在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「数据结构的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 代码量少&#xff0c;敲个…

2024年水资源保护盛事,“澜湄周”邀请国信华源加入!

4月26日&#xff0c;2024年水资源领域“澜湄周”活动在北京举行。水利部国科司、外交部亚洲司和边海司、湄公河五国驻华使馆以及澜湄水资源合作单位的代表嘉宾出席活动。北京国信华源公司特邀参加&#xff0c;现场就深化澜湄水资源合作展开深入交流研讨。 澜湄六国&#xff0c;…

软件测试用例模板

今天给大家分享下测试用例模板包含哪些内容&#xff1a; 1、测试项&#xff1a;[测试项名称] 2、测试用例标题&#xff1a;[测试用例标题] 3、优先级&#xff1a;[测试用例的优先级&#xff0c;冒烟用例为P0&#xff0c;基础用例P1等] 4、前置条件&#xff1a;[列出执行该测…

LeetCode_(兜兜转转还是你)浪漫的环形链表问题

✨✨所属专栏&#xff1a;LeetCode刷题专栏✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 第一题&#xff1a; 这道题的代码很简单&#xff0c;但是后续的一些问题在思考的过程是很复杂的。下面我们就一起来分析一下吧&#xff01; 链表带环的意思就是说链表的某个节点的next指针指向…

定位系统源码,工厂人员定位系统源码,UWB高精度定位系统源码

一套java定位系统源码&#xff0c;工厂人员定位系统源码&#xff0c;UWB高精度定位系统源码&#xff0c;前后端分离架构&#xff0c;源码有演示。 工厂人员定位系统&#xff0c;高精度的位置数据作为智能工厂数据流的重要组成部分&#xff0c;可实现对工厂内的人&#xff0c;车…

环状串的字典序

【题目描述】 长度为n的环状串有n种表示法&#xff0c;分别为从某个位置开始顺时针得到。例如&#xff0c;图3-4的环状串有10种表示&#xff1a; CGAGTCAGCT&#xff0c;GAGTCAGCTC&#xff0c;AGTCAGCTCG等。在这些表示法中&#xff0c;字典序最小的称为"最小表示"…
最新文章