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

http://www.lryc.cn/news/170297.html

相关文章:

  • 数据结构——KD树
  • python趣味编程-恐龙克隆游戏
  • 【漏洞复现】泛微e-office OfficeServer2.php 存在任意文件读取漏洞复现
  • 基于Yolov8的野外烟雾检测(4):通道优先卷积注意力(CPCA),效果秒杀CBAM和SE等 | 中科院2023最新发表
  • 程序员必掌握的核心算法:提升编程技能的关键路径
  • 面试算法10:和为k的子数组
  • 王道考研操作系统
  • HEXO 基本使用
  • Webpack Sourcemap文件泄露漏洞
  • WebGL层次模型——单节点模型
  • 【链表】反转链表 II-力扣 92 题
  • 【考研数学】高等数学第六模块 —— 空间解析几何(1,向量基本概念与运算)
  • 巨人互动|Facebook海外户Facebook客户反馈分数
  • Tomcat多实例部署和动静分离
  • 关于 C/C++ 中在指针前加 const 关键字的作用说明
  • Vue.js新手指南:从零开始建立你的第一个应用
  • 【案例】--EasyExcel导入导出文件案例
  • 深入探索图像处理:从基础到高级应用
  • Jetpack Compose基础组件 - Image
  • UINavigationController内的页面跳转实现 UIViewController 的 present和dismiss动画
  • PMP对项目管理工作有什么用?
  • Python 将‘20230919182550‘ 转换为 ‘%Y年%m月%d日 %H:%M‘
  • vue2.0检测无用的代码并删除
  • 小米华为,化干戈为玉帛!
  • 【文末赠书】SRE求职必会 —— 可观测性平台可观测性工程(Observability Engineering)
  • content生成自定义图标的方式是什么?
  • 无涯教程-JavaScript - SECH函数
  • 天宇微纳芯片ic测试软件如何测试芯片上下电功能?
  • 1万多爱背句子英语口语ACCESS\EXCEL数据库
  • C++:new 和 delete