当前位置: 首页 > news >正文

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将值绑定后,无法再次输入值进行绑定,需要做的是,清除绑定值,然后将数据进行清空处理就可以完成了相关值进行绑定了,也就是值的绑定处理。

相关文章:

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

在工作岗位上&#xff0c;上边分配一个任务&#xff0c;创建一个页面&#xff0c;从0-1&#xff0c;全部自己搭建&#xff0c;也没有啥模版&#xff0c;就这么来&#xff0c;那就直接来吧&#xff0c;没办法&#xff0c;那就直接上手&#xff0c;开发过程中&#xff0c;我使用了…...

数据结构——KD树

KD树&#xff08;K-Dimensional Tree&#xff09;是一种用于多维空间的二叉树数据结构&#xff0c;旨在提供高效的数据检索。KD树在空间搜索和最近邻搜索等问题中特别有用&#xff0c;允许在高维空间中有效地搜索数据点。 重要性质 1.分割K维数据空间的数据结构 2.是一颗二叉树…...

python趣味编程-恐龙克隆游戏

Python 中使用 Turtle 的恐龙克隆游戏免费源代码 使用 Turtle 的恐龙克隆游戏是一个用Python编程语言编码的桌面游戏应用程序。该项目包含在 Chrome 浏览器中克隆实际恐龙游戏的多种功能。该项目可以使正在修读 IT 相关课程的学生受益。这个应用程序非常有趣,可以帮助您学习创…...

【漏洞复现】泛微e-office OfficeServer2.php 存在任意文件读取漏洞复现

文章目录 前言声明一、漏洞描述二、漏洞分析三、漏洞复现四、修复建议前言 泛微e-office OfficeServer2.php 存在任意文件读取漏洞,攻击者可通过构造特定Payload获取敏感数据信息。 声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造…...

基于Yolov8的野外烟雾检测(4):通道优先卷积注意力(CPCA),效果秒杀CBAM和SE等 | 中科院2023最新发表

目录 1.Yolov8介绍 2.野外火灾烟雾数据集介绍 3.CPCA介绍 3.1 CPCA加入到yolov8 4.训练结果分析 5.系列篇 1.Yolov8介绍 Ultralytics YOLOv8是Ultralytics公司开发的YOLO目标检测和图像分割模型的最新版本。YOLOv8是一种尖端的、最先进的&#xff08;SOTA&#xff09;模型&a…...

程序员必掌握的核心算法:提升编程技能的关键路径

一&#xff1a;引言 作为程序员&#xff0c;算法是我们编程生涯中的灵魂。算法是解决问题的方法和步骤&#xff0c;它们在计算机科学中扮演着至关重要的角色。无论你是初学者还是经验丰富的专业人士&#xff0c;都需要掌握一些核心算法&#xff0c;因为它们在各种应用场景中频…...

面试算法10:和为k的子数组

题目 输入一个整数数组和一个整数k&#xff0c;请问数组中有多少个数字之和等于k的连续子数组&#xff1f;例如&#xff0c;输入数组[1&#xff0c;1&#xff0c;1]&#xff0c;k的值为2&#xff0c;有2个连续子数组之和等于2。 分析 在从头到尾逐个扫描数组中的数字时求出前…...

王道考研操作系统

王道考研操作系统 计算机系统概述操作系统的概念操作系统的特征操作系统的发展历程操作系统内核中断和异常![在这里插入图片描述](https://img-blog.csdnimg.cn/162452b4c60144e0bd500e180127c447.png)系统调用操作系统结构虚拟机错题 进程与线程进程控制进程通信线程和多线程模…...

HEXO 基本使用

1 新建、编辑并预览文章 1. 新建文章 hexo new [layout] title # 或 hexo n [layout] title创建文章前要先选定模板&#xff0c;在hexo中也叫做布局。hexo支持三种布局&#xff08;layout&#xff09;&#xff1a;post(默认)、draft、page。我们先介绍如何使用已有布局…...

Webpack Sourcemap文件泄露漏洞

Webpack Sourcemap文件泄露漏洞 前言一、Webpack和Sourcemap1.1 什么是Webpack1.2 什么是Sourcemap二、漏洞利用2.1 使用reverse-sourcemap工具2.1 直接看前端代码三、漏洞挖掘漏洞修复前言 Webpack主要是用于前端框架进行打包的工具,打包后形成.js.map文件,如果.js.map文件…...

WebGL层次模型——单节点模型

目录 多个简单模型组成的复杂模型 层次结构模型 单关节模型 JointModel程序中模型的层次结构 示例程序&#xff08;JointMode.js&#xff09; 代码详解 绘制层次模型&#xff08;draw&#xff08;&#xff09;&#xff09; 程序效果 多个简单模型组成的复杂模型 绘制…...

【链表】反转链表 II-力扣 92 题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…...

【考研数学】高等数学第六模块 —— 空间解析几何(1,向量基本概念与运算)

文章目录 引言一、空间解析几何的理论1.1 基本概念1.2 向量的运算 写在最后 引言 我自认空间想象能力较差&#xff0c;所以当初学这个很吃力。希望现在再接触&#xff0c;能好点。 一、空间解析几何的理论 1.1 基本概念 1.向量 —— 既有大小&#xff0c;又有方向的量称为向…...

巨人互动|Facebook海外户Facebook客户反馈分数

Facebook客户反馈分数是一项用于衡量用户对Facebook产品和服务满意度的指标。该指标被广泛应用于各种调研和评估活动&#xff0c;帮助Facebook了解用户对其平台和功能的意见和建议&#xff0c;并从中识别出改进的机会。 巨人互动|Facebook海外户&Facebook新闻提要的算法&am…...

Tomcat多实例部署和动静分离

一、多实例部署&#xff1a; 多实例&#xff1a;多实例就是在一台服务器上同时开启多个不同的服务端口&#xff0c;同时运行多个服务进程&#xff0c;这些服务进程通过不同的socket监听不同的服务端口来提供服务。 1.前期准备&#xff1a; 1.关闭防火墙&#xff1a;systemctl …...

关于 C/C++ 中在指针前加 const 关键字的作用说明

1. 作用说明&#xff1a; 在指针前加 const 的用途为&#xff1a;不可改变指针指向的内存的值&#xff0c;即将该指向指向的内存中的变量置为只读&#xff08;read-only) 变量。 但是&#xff0c;可以给 const 的指针赋值&#xff0c;即将具有 const 属性的指针指向别的内存地…...

Vue.js新手指南:从零开始建立你的第一个应用

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

【案例】--EasyExcel导入导出文件案例

目录 一、前言二、EasyExcel解析(导入)文件2.1、EasyExcel选型2.2、如何存储excel解析的文件2.3、解析格式规则的excel文件2.4、解析未知格式规则的excel文件三、EasyExcel解析(导出)文件3.1、导出基本代码实现一、前言 最近项目中,需要对excel、csv等文件进行解析,并做相关…...

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

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

Jetpack Compose基础组件 - Image

Image的源码参数预览 Composable fun Image(painter: Painter,contentDescription: String?,modifier: Modifier Modifier,alignment: Alignment Alignment.Center,contentScale: ContentScale ContentScale.Fit,alpha: Float DefaultAlpha,colorFilter: ColorFilter? …...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Swift 协议扩展精进之路:解决 CoreData 托管实体子类的类型不匹配问题(下)

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...