点击加号添加新的输入框

news2024/12/23 16:47:26

实现点击加号添加新的输入框
实现如上图的效果

html部分:

<el-form-item class="forminput" v-for="(item,index) in formdata.description" :key="index" :label="'描述'+(index+1)" prop="description">
	<el-input v-model="formdata.description[index]"></el-input>
	<el-button type="primary" icon="el-icon-plus" circle @click="adddescritpion"></el-button>
</el-form-item>

js部分:
data:

formdata:{
	name_en:'',
	name_cn:'',
	url:'',
	type:0,
	description:[
		''
	]
}

按钮的方法adddescritpion:

adddescritpion(){
	this.formdata.description.push('');
}

css部分:
因为会有多个forminput,所以选取除了最后一个的forminput,并设置他们的后代元素el-button的显示模式为none,就会使得其他的加号都消失。

.forminput:not(:nth-last-child(1)) .el-button{
  display: none;
}

点击加号后,会在formdata的description数组中再加入一个空的字符串,v-for重新渲染,就会生成一个新的输入框

注意:input中的v-model不能绑定为item,会报错,因为这样绑定无法修改v-for源数组,因为写入别名就跟修改函数形参一样。应采用上面的数组形式绑定。

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

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

相关文章

STM32入门之创建工程模板

1.STM32固件库的结构图如下。从图中可以看出&#xff0c;我们在配置STM32的固件库时需要配置用户层、CMSIS层的文件。配置库文件即正确的配置这些函数的文件。CMSIS(Cortex Microcontroller Software Interface Standard)是ARM公司提供的微控制器软件接口标准&#xff0c;所有使…

栈和队列(基础知识和基本操作)

栈&#xff1a; 1.栈&#xff1a;在表尾进行插入和删除的操作受限的线性表。 2.逻辑结构&#xff1a;线性结构【一对一的关系】 3.存储结构&#xff1a;顺序存储【顺序栈】、链式存储【链栈】 4.栈的特点&#xff1a;先进后出【first in last out FILO表】 后进先出【last…

消息队列 CKafka 跨洋数据同步性能优化

导语 本文主要介绍了 CKafka 在跨洋场景中遇到的一个地域间数据同步延时大的问题&#xff0c;跨地域延时问题比较典型&#xff0c;所以详细记录下来做个总结。 一. 背景 为了满足客户跨地域容灾、冷备的诉求&#xff0c;消息队列 CKafka 通过连接器功能&#xff0c;提供了跨…

5.4.tensorRT基础(2)-学习第一个插件的编写

目录 前言1. 插件2. 补充知识总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 基础-学习第一个插件的编写 课程大…

python sorted函数

python列表排序 简单记一下python中List的sort方法&#xff08;或者sorted内建函数&#xff09;的用法。 关键字&#xff1a; python列表排序 python字典排序 sorted List的元素可以是各种东西&#xff0c;字符串&#xff0c;字典&#xff0c;自己定义的类等。 sorted函数用法如…

【项目 进程6】 2.13 匿名管道通信案例 2.14管道的读写特点和管道设置为非阻塞

文章目录 2.13 匿名管道通信案例匿名管道的使用实现 ps aux | grep xxx 父子进程间通信 2.14管道的读写特点和管道设置为非阻塞管道的读写特点&#xff1a;总结设置管道非阻塞 2.13 匿名管道通信案例 匿名管道的使用 一般匿名管道不推荐父进程与子进程交叉读写数据&#xff0c…

nginx 配置 wss加密访问 mqtt

1. 在服务器上部署mqtt服务 2.在宝塔上配置域名证书 3.nginx配置websocket server {listen 80;listen 443 ssl http2;server_name ws-xx.example.com;index index.php index.html index.htm default.php default.htm default.html;root /www/wwwroot/ws-xx.example.com;loca…

金融软件技术:创新与安全并行驶

随着科技的迅速发展&#xff0c;金融行业正经历着一场前所未有的数字化转型。金融机构需要不断创新和提升效率&#xff0c;以满足客户需求&#xff0c;并保持竞争优势。在这个数字时代中&#xff0c;金融软件技术成为了实现这一目标的关键要素。本文将从两个方面探讨金融软件技…

fastadmin采坑之富文本编辑器

整了好久才弄好&#xff0c;后缀为content&#xff0c;类型为text 或者longtext类型&#xff0c;这样做命令行才能成功

Python教程(5)——Python的第一个程序

python的环境以及IDE都准备好之后&#xff0c;我们就可以开始Python之旅了。Python的第一个程序通常是打印输出"Hello, World!"&#xff0c;非常简单。以下是一个示例&#xff1a; print("Hello, World!")运行python代码 首先必须明白python是一门动态语…

Asp.net Core配置CORS 跨域无效(记录一下)

问题 学习老杨的英语网站项目&#xff0c;运行项目时&#xff0c;发现出现了跨域的问题。 然后自己建一项目&#xff0c;进行配置&#xff0c;测试&#xff0c;发现配置CORS 跨域时&#xff0c;发现跨域的配置无效&#xff0c;依旧报错。 解决 网上找了一天&#xff0c;然后…

【Uniapp,Vue】阻止父元素事件覆盖子元素事件

有个需求&#xff0c;点击一个元素&#xff0c;让弹出框显示&#xff0c;点击弹出框以外的区域&#xff0c;就关闭弹出框&#xff0c;如下代码所示。 但是这样有个问题&#xff0c;就是当弹出框显示以后&#xff0c;点击弹出框的区域也会触发父元素的点击事件&#xff0c;使得i…

【多模态】17、CORA | 将 CLIP 使用到开集目标检测

文章目录 一、背景二、方法2.1 总体结构2.2 region prompting2.3 anchor pre-matching 三、效果 论文&#xff1a;CORA: Adapting CLIP for Open-Vocabulary Detection with Region Prompting and Anchor Pre-Matching 代码&#xff1a;https://github.com/tgxs002/CORA 出处…

小程序路由跳转页面重复问题

目标&#xff1a;想要某个页面在历史中&#xff08;页面栈&#xff09;只显示一次 什么是页面栈&#xff1a; 在小程序开发中&#xff0c;页面栈是指小程序当前打开的页面的层级关系堆栈。每当打开一个新页面时&#xff0c;它会被放置在页面栈的顶部&#xff0c;而当前页面就位…

如何实现外网远程访问路由内部服务器主机端口应用?

路由器是上网常见的设备。在我们开通网络接入带宽时&#xff0c;或需要进行管理路由网络操作时&#xff0c;就需要登录路由后台设置配置相关操作。 我们在涉及路由管理方面经常会遇到一些常见的问题。路由管理入口地址是什么&#xff1f;如何配置路由有线网络或无线网络或分配…

uniapp开启消息通知/提示(使用uniPush)

亲爱的小伙伴们&#xff0c;最近对uniPush有稍许研究&#xff0c;当前研究出一些心得&#xff0c;现在分项给大家&#xff0c;希望对大家的uniapp之路有所帮助。本次的教程是教会你如何使用uniPush自定义消息通知&#xff0c;同时还附带添加消息提示音添加&#xff0c;多的不说…

linux - ping -I 的一种异常场景处理分析

实验 用ping -I 指定一个没有配置ip地址且已经up起来的网卡。 结果 linux会根据路由规则选择一个其他网卡的ip&#xff0c;但&#xff0c;还是会从该指定网卡发送。 iputils 用-I指定网卡对应的bind操作 获取该socket的本地ip&#xff0c;当bind了NIC&#xff0c;且该NIC没有…

网络传输媒体

物理层下面的传输媒体分为两种&#xff1a;导向型传输媒体和非导向型传输媒体。 一、导向型传输媒体 同轴电缆&#xff1a; 图示&#xff1a; 分类&#xff1a; 基带同轴电缆&#xff1a;用于数字传输&#xff0c;在早期局域网中广泛使用宽带同轴电缆&#xff1a;用于模拟传输…

element+vue 之预览pdf组件

1.组件previewPdf <template><el-drawer:title"drawerName":visible.sync"drawerVal":direction"direction":append-to-body"true"size"100%":before-close"drawerClose"><iframe :src"url&…

前端工程化第二章:webpack5基础(中)

文章目录 1. 处理css资源&#xff08;css文件拆分 mini-css-extract-plugin&#xff09;1.1. package.json1.2. webpack.config.js 2. 处理预编译器&#xff08;less/scss&#xff09;2.1. src/index.js2.2. src/index.less2.3. src/index.scss2.4. webpack.config.js 3. 适配&…