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

news2024/12/23 17:37:17

最近在写表单重置的时候出现了问题,在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.coloradmin.cn/o/1633256.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

流水线工作流程

java编译命令&#xff1a; java -jar xxx.jar (其它参数已忽略) docker镜像构建命令&#xff1a; docker build -t [镜像名称:latest] -f 指定[Dockerfile] [指定工作目录] 推送镜像 jenkinsfile: 主要流程登录镜像仓库&#xff0c;打包镜像&#xff0c;推送到镜像仓库

MySql 主从同步-在原来同步基础上增加历史数据库

在MySql已经主从同步的后&#xff0c;由于有新的需求再增加1个历史数据库&#xff0c;要改原来的1个变成现在的2个数据库。在官网并没有找到类似的场景&#xff08;官方同步多个数据是从一开始就设置&#xff0c;不是后续增加的&#xff09;&#xff0c;只能结合以往的经验自己…

第三方软件测试机构-科技成果评价测试

科技成果评价测试是对科研成果的工作质量、学术水平、实际应用和成熟程度等方面进行的客观、具体、恰当的评价过程。这一评价过程有助于了解科技成果的质量和水平&#xff0c;以及其在学术和应用方面的价值和潜力。 科技成果评价测试主要包括以下几个方面&#xff1a; 工作质量…

OpenVoice: Versatile Instant Voice Cloning

OpenVoice&#xff1a;多功能即时语音克隆 摘要 OpenVoice是一种多功能的即时声音克隆方法&#xff0c;它只需要参考说话者的一小段音频就可以复制他们的声音并以多种语言生成语音。OpenVoice 在解决以下领域中的开放性挑战方面代表了重大进展&#xff1a;1) 灵活的声音风格控…

【1762】java校园单车投放系统Myeclipse开发mysql数据库web结构jsp编程servlet计算机网页项目

一、源码特点 java校园单车投放管理系统是一套完善的java web信息管理系统 采用serlvetdaobean&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S 模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#…

面试题:两阶段提交与三阶段提交的区别?

主要区别有以下几点&#xff1a; 增加了一个询问阶段&#xff0c;问了下&#xff0c;你能不不能行&#xff1f;加入了超时机制 2PC&#xff08;二阶段提交协议&#xff09; 2PC&#xff0c;两阶段提交&#xff0c;将事务的提交过程分为资源准备和资源提交两个阶段&#xff0c;…

Linux配置双网卡,1NAT 2桥接,ARM板上网

1、简介 版本型号&#xff1a;ubuntu18.04 ARM板型号&#xff1a;6ull本文主要记录配置第一次ubuntu与arm板连接的nfs配置和ARM板上网的配置&#xff0c;按照配置网络、配置nfs系统、给板子连网 顺序进行。该配置的前提是创建ubuntu系统的网络配置选择的是NAT模式&…

算法设计优化——起泡排序

文章目录 0.概述1 起泡排序&#xff08;基础版&#xff09;1.1 算法分析1.2 算法实现1.3 重复元素与稳定性1.4 复杂度分析 2 起泡排序&#xff08;改进版&#xff09;2.1 目标2.2 改进思路2.3 实现2.4 复杂度分析 3 起泡排序&#xff08;改进版2&#xff09;3.1 目标3.1 改进思…

鸿蒙内核源码分析(汇编基础篇) | CPU在哪里打卡上班

本篇通过拆解一段很简单的汇编代码来快速认识汇编&#xff0c;为读懂鸿蒙汇编打基础.系列篇后续将逐个剖析鸿蒙的汇编文件. 汇编很简单 第一&#xff1a; 要认定汇编语言一定是简单的&#xff0c;没有高深的东西&#xff0c;无非就是数据的搬来搬去&#xff0c;运行时数据主要…

基于Spring Boot的体质测试数据分析及可视化系统设计与实现

基于Spring Boot的体质测试数据分析及可视化系统的设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 前台首页界面图&#xff0c;体质测试…

day17-day20_项目实战项目部署

万信金融 项目部署 目标&#xff1a; 理解DevOps概念 能够使用Docker Compose部署项目 理解持续集成的作用 会使用Jenkins进行持续集成 1 DevOps介绍 1.1 什么是DevOps DevOps是Development和Operations两个词的缩写&#xff0c;引用百度百科的定义&#xff1a; DevOps…

68.网络游戏逆向分析与漏洞攻防-利用数据包构建角色信息-自动生成CPP函数解决数据更新的问题

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

Seata-server配置

首先先兼容一下版本看看所用的版本是否都兼容 版本兼容查看 建立seata-server数据库 数据库DDL 给每个业务库建立undo.log表 undo.log 然后在虚拟机安装seata-server 创建文件路径&#xff0c;并创建docker-compose.yml文件 创建完成后先启动一下seata docker run -rm seata…

linux远程访问及控制

一、SSH远程管理 1.SSH的简介 SSH远程管理是一种通过 SSH 协议安全地管理远程计算机的方法。允许管理员通过加密的连接从本地计算机或其他远程位置连接到远程计算机&#xff0c;并执行管理任务、配置设置、故障排除等操作。 远程链接的两种方法&#xff1a;SSH 、Telnet S…

07_for循环返回值while循环

文章目录 1.循环返回值2.yield接收for返回值3.scala调用yield方法创建线程对象4.scala中的while循环5.scala中的流程控制 1.循环返回值 for循环返回值是Unit 原因是防止产生歧义&#xff1b; 2.yield接收for返回值 // 2.yield关键字打破循环&#xff0c;可以使for循环输出…

力扣HOT100 - 207. 课程表

解题思路&#xff1a; class Solution {public boolean canFinish(int numCourses, int[][] prerequisites) {int[] inDegree new int[numCourses];//存每个结点的入度List<List<Integer>> res new ArrayList<>();//存结点之间依赖关系Queue<Integer>…

Spring Security(学习笔记)--漏洞保护(csrf攻击与防御以及源码分析)!

重点标识 csrf 攻击防御演示&#xff01; 源码分析&#xff01; CSRF攻击与防御 CSRF是什么 &#xff0c;跨站请求伪造&#xff0c;简单解释一下&#xff0c;就是用户登录某个界面&#xff0c;如银行界面&#xff0c;进行转账&#xff0c;完了之后并没有注销登录&#xff0…

Scrapy 爬虫教程:从原理到实战

Scrapy 爬虫教程&#xff1a;从原理到实战 一、Scrapy框架简介 Scrapy是一个由Python开发的高效网络爬虫框架&#xff0c;用于从网站上抓取数据并提取结构化信息。它采用异步IO处理请求&#xff0c;能够同时发送多个请求&#xff0c;极大地提高了爬虫效率。 二、Scrapy运行原…

蒸镀的氧化硅薄膜为什么有时候是绿色有时候是棕色的?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;我们用热阻式蒸镀设备镀氧化硅薄膜&#xff0c;出来的颜色有时候会发生变化是什么原因呀&#xff1f;有时候薄膜是绿色有时候是棕色。 氧…

Excel 中用于在一个范围中查找特定的值,并返回同一行中指定列的值 顺序不一样 可以处理吗

一、需求 Excel 中&#xff0c;在一列&#xff08;某范围内&#xff09;查找另一列特定的值&#xff0c;并返回同一行中另一指定列的值&#xff0c; 查找列和返回列的顺序不一样 二、 实现 1、下面是一个使用 INDEX 和 MATCH 函数的例子&#xff1a; 假设你有以下数据&…