当前位置: 首页 > 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? …...

手把手复现:在MATLAB/Simulink里搭建PMSM的两种解耦模型(附模型下载)

在MATLAB/Simulink中构建永磁同步电机解耦控制模型的实战指南 永磁同步电机&#xff08;PMSM&#xff09;因其高效率和高功率密度&#xff0c;已成为工业驱动和电动汽车领域的核心部件。但对于刚接触电机控制的工程师和学生来说&#xff0c;如何将教科书中的解耦控制理论转化为…...

Midjourney输出≠成品!树莓派自动裁切+水印+背胶封装印相工作流(附GitHub开源项目+硬件BOM清单)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney输出≠成品&#xff01;树莓派自动裁切水印背胶封装印相工作流&#xff08;附GitHub开源项目硬件BOM清单&#xff09; Midjourney生成的高分辨率图像只是创作起点&#xff0c;真正交付实体印…...

基于Agent架构的轻量级自托管部署工具Ship实战指南

1. 项目概述&#xff1a;一个为开发者而生的轻量级部署工具最近在折腾一个前后端分离的小项目&#xff0c;从本地开发到服务器部署&#xff0c;中间那套流程真是让人头大。代码提交、构建、测试、再到服务器上拉取、重启服务&#xff0c;一套组合拳下来&#xff0c;少说也得十几…...

Atheon OpenClaw插件:构建Discord Webhook自动化通知系统的核心指南

1. 项目概述与核心价值最近在折腾一个叫 Atheon OpenClaw Plugin 的开源项目&#xff0c;这名字听起来有点酷&#xff0c;是吧&#xff1f;简单来说&#xff0c;这是一个为 Discord 机器人框架 Atheon 设计的插件&#xff0c;核心功能是实现一个“开放之爪”——也就是一个灵活…...

OpenCore Legacy Patcher深度解析:让老旧Mac重获新生的技术实现

OpenCore Legacy Patcher深度解析&#xff1a;让老旧Mac重获新生的技术实现 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 对于拥有2008年至2017年Intel Mac…...

Obsidian智能管家:基于规则引擎的笔记库自动化运维实践

1. 项目概述&#xff1a;一个为Obsidian而生的智能管家如果你和我一样&#xff0c;是个重度Obsidian用户&#xff0c;那你一定经历过这样的时刻&#xff1a;笔记库越来越大&#xff0c;文件散落在各个角落&#xff0c;标签和链接关系变得错综复杂&#xff0c;想要找一个特定的笔…...

RCX自定义主题和外观设置:如何打造个性化的云管理界面

RCX自定义主题和外观设置&#xff1a;如何打造个性化的云管理界面 【免费下载链接】rcx Rclone for Android 项目地址: https://gitcode.com/gh_mirrors/rc/rcx RCX作为一款功能强大的Android云管理工具&#xff0c;不仅提供了全面的Rclone功能支持&#xff0c;还允许用…...

孤舟笔记 IO 与网络编程篇六 什么是网络四元组?它是理解TCP连接的关键

文章目录一、先说结论&#xff1a;四元组核心事实二、四元组是什么&#xff1f;三、一个端口能建立多少连接&#xff1f;四、客户端的连接上限五、NAT 和四元组六、四元组在负载均衡中的应用网络四元组 全景回答技巧与点评标准回答加分回答面试官点评个人网站面试官问"一个…...

MCP Loom:快速构建AI工具与数据连接器的开发框架

1. 项目概述&#xff1a;MCP Loom&#xff0c;一个连接AI与真实世界的“织布机”如果你最近在折腾AI应用开发&#xff0c;特别是想让你的AI助手&#xff08;比如Claude、Cursor等&#xff09;能直接操作你电脑上的文件、数据库&#xff0c;甚至调用外部API&#xff0c;那么你很…...

Windows安全组件深度解析与优化:2025专业版系统性能调优完整指南

Windows安全组件深度解析与优化&#xff1a;2025专业版系统性能调优完整指南 【免费下载链接】windows-defender-remover A tool which is uses to remove Windows Defender in Windows 8.x, Windows 10 (every version) and Windows 11. 项目地址: https://gitcode.com/gh_m…...