v-model绑定导致的element UI文本框输入第一次值后被绑定,导致空文本框无法再输入文字

在工作岗位上,上边分配一个任务,创建一个页面,从0-1,全部自己搭建,也没有啥模版,就这么来,那就直接来吧,没办法,那就直接上手,开发过程中,我使用了v-model对输入文本框的值进行双向绑定,这样可以直接使用用户输入文本框的值,同时,后端传递的值也可以直接展示到文本框中,这样就实现文本框的双向绑定,但是需要注意的是,使用文本框有风险,一不小心就会碰到和我一样的问题,在输入了第一次值后,明明是一个空的文本框,你去输入文字,发现怎么输入数值,都是空的无法输入。

我的原因在于

<el-form ref="formAdd" :model="brandAdd" label-width="100px" :rules="rulesBrand"><el-row><el-col :span="10"><el-form-item label="品牌名称" prop="name"><template><el-select v-model="brandAdd.name" allow-create filterable placeholder="请选择" clearable ref="brandref" @change="checkBrand('formAdd')" ><el-optionv-for="item in optionstName":key="item.id":label="item.name":value="item.name"></el-option></el-select></template></el-form-item></el-col></el-row></el-form>

但是我js就只有一个

brandAdd:{},

看清楚,我并未给name进行初始化,这样就导致了一个问题,也就是值无法进行绑定,这样就会导致我上边说的问题,明明文本框允许输入,但是就是无法输入值。

改成

brandAdd:{name:null,},

之后再次进行测试,发现可以了,这个问题我刚刚开始居然没注意到,实际上是v-model将值绑定后,无法再次输入值进行绑定,需要做的是,清除绑定值,然后将数据进行清空处理就可以完成了相关值进行绑定了,也就是值的绑定处理。

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

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

相关文章

Verdi实现信号的平移

在Verilog/System verilog中&#xff0c;# xxx可以实现延迟指定时间的功能&#xff0c;而在使用verdi查看信号波形并进行分析时&#xff0c;同样也可以实现类似的功能。 (注&#xff1a;这种信号平移是有其应用场景的&#xff0c;例如&#xff0c;在某些仿真模型中&#xff0c;…

智华计算机终端保护检查系统使用笔记

使用说明 【智华保密检查右键管理员运行后粘贴密码】—— 点击脚本更改系统时间【智华计算机终端保护检查系统】—— 打开检测软件进行保密检查 检测文件格式 .pdf .doc .docx .xls .pptx 检测时间日志 2023年9月14日A&#xff1a;【34:03秒】2023年9月14日B&#xff1a;【…

ValueError: Index contains duplicate entries,cannot reshape

项目场景&#xff1a; python-dataframe 在对行转列的时候出现 ValueError: Index contains duplicate entries,cannot reshape 问题描述 dataframe官方文档 # 为什么报错 是因为 index 和 columns 有重复值 df df.drop_duplicates(subset[foo,bar],keepfrist) df.pivot(i…

使用patch-package保存node_modules包修改

遇到情况&#xff0c;第三方包存在bug或者缺少文件时候&#xff0c;我们手动修改了某个包时候&#xff0c;下次npm安装时候会导致原来的修改呗覆盖 安装 这时候可以用到npm工具包patch-package&#xff0c;项目更目录命令行安装 npm i -D patch-package修改文件 修改好nod…

SpringSecurity学习 - 认证和授权

一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与SpringSecurity&#xff0c;Shiro的上手更加的简单。 一般Web应用的需要进行认证和授权。 认证&#xff1a;验证当前访问系统的是不是本系统的用户&#xff0c;并且要…

Ubuntu20.4搭建基于iRedMail的邮件服务器

iRedMail 是一个基于 Linux/BSD 系统的零成本、功能完备、成熟的邮件服务器解决方案。基于ubuntu20.4搭建基于iRedMail的邮件服务器包括环境配置&#xff0c;iRedMail安装与配置&#xff0c;iRedMail调整邮件附件大小等3个小节进行描述。具体如下详细描述。 1 环境配置 1.设置…

SDXL prompt 笔记

模型 模型有两个&#xff0c;分别是 stable-diffusion-xl-base-1.0、stable-diffusion-xl-refiner-1.0。 base 模型是用来做文生图&#xff0c;refiner 模型是用来做图生图的。 SDXL 模型之 base、refiner 和 VAE_云水木石的博客-CSDN博客 分辨率 默认是1024*1024&#xf…

c++模版元编程-类模版

C 是一门广泛使用的编程语言&#xff0c;提供了丰富的特性和工具来支持灵活和可复用的代码编写。其中&#xff0c;类模板是 C 中强大而重要的特性之一&#xff0c;它使得我们可以编写通用的代码&#xff0c;以处理不同类型的数据。本文将详细介绍 C 类模板的概念、语法和使用方…

深入探索图像处理:从基础到高级应用

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 图像处理是计算机视觉领…

极验率先推出一键认证安全版,供客户自主免费升级,规避日常运营中的风险盲区

2017年6月1日&#xff0c;互联网服务开始响应《中华人民共和国网络安全法》的要求实施账号实名认证。由此&#xff0c;手机号码成为网络世界最主要的“身份证”&#xff0c;也让本机号码一键认证成为可能。其中&#xff0c;极验是最早的直连三大运营商的五家供应商之一&#xf…

生物的神经系统与机器的人工神经网络

生物的神经系统与机器的人工神经网络 文章目录 前言一、人工神经网络二、生物的神经系统三、关系四、相似与区别4.1. 相似&#xff1a;4.2. 区别: 总结 前言 因为本人是学生物的&#xff0c;并且深度学习的核心——人工神经网络与生物的神经系统息息相关&#xff0c;故想要在本…

VMwave虚拟机配置和外网联通

还原默认设置之后&#xff0c;参考 VMwave 虚拟机的三种上网方式_51CTO博客_虚拟机网络设置的三种 设置桥接模式 &#xff0c;配置虚拟机为静态IP&#xff08;网段和主机相通&#xff09;。

华为开源自研AI框架昇思MindSpore应用案例:消噪的Diffusion扩散模型

目录 一、环境准备1.进入ModelArts官网2.使用CodeLab体验Notebook实例 二、案例实现构建Diffusion模型位置向量ResNet/ConvNeXT块Attention模块组归一化条件U-Net正向扩散数据准备与处理采样训练过程推理过程&#xff08;从模型中采样&#xff09; 本文基于Hugging Face&#x…

zabbix自定义监控

一、实验准备 192.168.115.148 zabbix-server 192.168.115.151 zabbix-angent rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm yum install zabbix-server-mysql zabbix-agent yum install centos-release-scl vim /etc/y…

电商平台SDK如何保障安全?

CNNIC第52次《中国互联网络发展状况统计报告》显示&#xff0c;截至2023年6月&#xff0c;我国网民规模达10.79亿人&#xff0c;其中网络购物用户规模达8.84亿人&#xff0c;较2022年12月增长3880万。 国家统计局数据显示&#xff0c;2023年上半年&#xff0c;全国网上零售额达…

Java毕业设计-基于SpingBoot的网上图书商城

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1. 简介2 技术栈3.1系统功能 4系统设计4.1数据库设计 5系统详细设计5.1系统功能模块5.1系统功能…

STM32F103RCT6学习笔记1:GPIO认识—点灯

今日开始快速掌握这款STM32F103RCT6芯片的环境与编程开发&#xff0c;有关基础知识的部分不会多唠&#xff0c;直接实践与运用&#xff01;文章贴出代码测试工程与测试效果图&#xff1a; 目录 STM32F103RCT6参数解读&#xff1a; GPIO的基础认识与分类&#xff1a; 串口相…

5.后端·新建子模块与开发(自动模式)

文章目录 学习资料自动生成模式创建后端三层 学习资料 https://www.bilibili.com/video/BV13g411Y7GS?p11&spm_id_frompageDriver&vd_sourceed09a620bf87401694f763818a31c91e 自动生成模式创建后端三层 首先&#xff0c;运行起来若依的前后端整个项目&#xff0c;…

《Python趣味工具》——自制emoji3

今日目标 在上次&#xff0c;我们绘制了静态的emoji图。并且总结了turtle中的常用函数。 本次我们将尝试制作一个动态的emoji&#xff0c;让你的表情包动起来&#xff01; 文章目录 一、动画原理&#xff1a;二、制作动画&#xff1a;1. 修改eyes_black()函数&#xff1a;2. 绘…

【日常业务开发】Java调用第三方http接口的常用方式

【日常业务开发】Java调用第三方http接口的常用方式 概述Java调用第三方http接口的方式通过JDK网络类Java.net.HttpURLConnection通过apache common封装好的HttpClient通过Apache封装好的CloseableHttpClient通过OkHttp通过Spring的RestTemplate通过hutool的HttpUtil 总结 概述…