element-ui input 输入框赋值后,无法再输入的问题解决

问题

dialog弹出框里的form表单,打开后给输入选项赋值,改选项无法再输入。问题代码:

     <el-form :model="form" ref="formRef" label-width="120px" size="small"><el-form-item label="业务方" prop="bizPartyCode"><el-input v-model="form.bizPartyCode"></el-input></el-form-item></el-form>
data() {return {formDialogVisible: false,form: {}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.form.bizPartyCode = 'value'})}}

原因分析

初始值form的属性没有定义,后续直接给form添加属性并赋值,vue没有监听到form值变化,输入选项就没有重新渲染,所以出现无法输入(实际已赋值)。

解决方法

方法一、在form初始值中定义好属性

data() {return {formDialogVisible: false,form: {bizPartyCode: ''}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.form.bizPartyCode = 'value'})}}

方法二:使用vue的$set()方法

vue官方文档:对于已经创建的实例,Vue 不允许动态添加根级别的响应式 property。但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。

data() {return {formDialogVisible: false,form: {}}},methods: {/*** 新建&&修改*/showAdd() {this.formDialogVisible = truethis.$nextTick(()=>{this.$set(this.form, 'bizPartyCode', 'value')})}}

问题解决。

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

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

相关文章

记一次有趣的免杀探索

文章目录 前记查杀排查源码修改免杀效果测试 前记 evilhiding昨天被提issue不能绕过火绒了&#xff0c;于是今天更新了evilhiding v1.1&#xff0c;已经可以继续免杀了。 期待各位的stars&#xff0c;项目地址如下&#xff1a; https://github.com/coleak2021/evilhiding查杀…

在Win10系统进行MySQL的安装、连接、卸载

在Win10系统进行MySQL的安装、连接、卸载 MySQL的安装 本教程在Win10系统下安装部署MySQL-8.0.32版。 MySQL安装参考地址 MySQL安装包地址 提取码: rnbc。 选择下载mysql-installer-community-8.0.32.0安装包。 连接数据库 方式一&#xff1a; 安装后&#xff0c;可以在开始…

Ruby 之方法委托

ruby 方法委托的优点在于&#xff0c;可以将多个不同实例&#xff08;或类&#xff09;的方法组织在一起&#xff0c;然后进行统一调用&#xff0c;方便各类方法的统一管理。比如下边示例中的 color 和 username&#xff0c;本来是不同类里边的方法&#xff0c;但最后都可以统一…

非洲“支付宝”PalmPay搭载OceanBase:成本降低80%

10 月 30 日&#xff0c;非洲支付公司PalmPay 的核心系统搭载国产自研数据库OceanBase&#xff0c;正式投入使用。PalmPay 也是 OceanBase 首个非洲商业用户。 作为一家非洲领先的金融科技公司&#xff0c;PalmPay 于 2019 年在尼日利亚推出电子钱包应用&#xff0c;其功能类似…

中兴再推爆款,双2.5G网口的巡天AX3000Pro+仅需299元

10月30日消息,中兴新款路由器中兴巡天AX3000Pro将于10月31日20:00正式开售,当前可在天猫、京东及红魔商城进行预约,首发价格299元。 据了解,中兴巡天AX3000Pro是中兴智慧家庭推出的巡天系列新品,也是当前市场上唯一一款300元价位内配备双2.5G网口的路由器。 中兴巡天AX3000Pro…

SpringBoot绑定配置文件中变量的四种方式-解析

当在Spring Boot中需要绑定配置文件中的变量时&#xff0c;可以使用以下注解&#xff1a; PropertySource&#xff1a;用于指定要加载的属性文件。可以将该注解放置在Configuration类上。 Configuration PropertySource("classpath:application.properties") public…

在云栖,一场关于数据洞察的创新实践

云布道师 数据驱动创新创新鉴于未来。做好数据洞察&#xff0c;是鉴往知来的必备条件。阿里云将携手广大开发者&#xff0c;进一步完善相关技术和工具&#xff0c;提供更好的产品和方案&#xff0c;让数据洞察的应用更加广泛和深入。 2023 年 11 月 2 日&#xff0c;是为期三…

Git 删除本地和远程分支

目录 删除本地和远程分支分支删除验证验证本地分支验证远程分支 开源项目微服务商城项目前后端分离项目 删除本地和远程分支 删除 youlai-mall 的 dev 本地和远程分支 # 删除本地 dev 分支&#xff08;注&#xff1a;一定要切换到dev之外的分支才能删除&#xff0c;否则报错&…

数据库连接池大小的调整原则

配置连接池是开发人员经常犯的错误。配置池时需要理解几个原则&#xff08;对于某些人来说可能违反直觉&#xff09;。 想象一下&#xff0c;您有一个网站&#xff0c;虽然可能不是 Facebook 规模的&#xff0c;但仍然经常有 10,000 个用户同时发出数据库请求&#xff0c;每秒…

力扣第1049题 最后一块石头的重量Il c++ 动态规划(01背包)

题目 1049. 最后一块石头的重量 II 中等 相关标签 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x <…

网络工程师应知应会:基础知识(5)

一、防火墙区域结构 防火墙按安全级别不同&#xff0c;可划分为内网、外网和 DMZ 区。 (1) 内网。 内网是防火墙的重点保护区域&#xff0c;包含单位网络内部的所有网络设备和主机。该区域是可信的&#xff0c;内网发出的连接较少进行过滤和审计。 (2) 外网。 外网是防火墙重…

面试算法51:节点值之和最大的路径

题目 在二叉树中将路径定义为顺着节点之间的连接从任意一个节点开始到达任意一个节点所经过的所有节点。路径中至少包含一个节点&#xff0c;不一定经过二叉树的根节点&#xff0c;也不一定经过叶节点。给定非空的一棵二叉树&#xff0c;请求出二叉树所有路径上节点值之和的最…

9.Vue前端使用iframe集成帆软报表的单点登录

一、背景 需要把帆软报表内嵌到若依里面来。 二、帆软设置 2.1 帆软报表的url 打开帆软后端里面的【目录管理】查看具体报表的url 帆软报表的具体地址为: Frm聚合报表地址: 【帆软的服务http】+【/webroot/decision/view/form?viewlet=demo/demo.frm】 CPT普通报表的地…

查询和下载“省市县乡村“五级行政区划

背景信息 在更新完CTAmap1.12版本之后&#xff0c;我想继续完善这个系列的数据&#xff0c;把时间范围往前更新是基础&#xff0c;但如何展现多年的数据是个值得解决的问题。 如何展现多个年份的行政区划&#xff1f;我的思考是用思维导图的形式&#xff0c;简单明了。既然要…

WSL1 安装 debian xfce 用xrdp 导入远程桌面

凑合能用 晃晃行 晃晃不行 而且比较卡 还经常报崩溃 sudo apt install xfce4 xfce4-goodies xorg dbus-x11 x11-xserver-utils apt install locales -y 安装过完应该会提示设置locales&#xff0c;如果安装完之后想要更改相关设置&#xff0c;可以使用如下命令重新设置loca…

Github 自动化部署到GitHub Pages

1.准备工作 新建仓库 新建项目 配置 vite.config.ts base: ./,部署应用包时的基本URL&#xff0c;例&#xff1a;vue-cli 5.x 配置 publicPath 推送到远程仓库 2.配置 GitHub Token 点击 Settings -> Actions -> General 找到 Workflow permissions&#xff0c;选中第…

【java学习—十】操作集合的工具类Collections(8)

文章目录 1. 操作集合的工具类&#xff1a; Collections2. 应用3. 查找、替换3.1. max 与 min3.2. 根据Comparator返回max(min) 3.3. frequency 与 replaceAll4. 同步控制 1. 操作集合的工具类&#xff1a; Collections Collections 是一个操作 Set 、List 和 Map 等集合的工具…

Spring XML使用CASE WHEN处理SELECT字段

在日常开发中&#xff0c;经常会碰到需要导出的情况。而一些枚举值或者状态一般是定义成整型&#xff0c;这个时候需要对数据进行转换&#xff0c;转换成对应的文本再导出。 在XML中用CASE WHEN来根据不同的查询结果做不同的处理。 比如 SELECT name AS 姓名, age AS 年龄 C…

红黑树——插入底层实现【C++】面试重灾区!!

目录 前言 一&#xff0c;概念 定义 二&#xff0c;insert 情况一&#xff1a; 情况二&#xff1a; 情况三&#xff1a; insert代码 三&#xff0c; 红黑树验证(面试题) 产生随机数验证 每日一图区&#xff1a; 前言 AVL树是一棵绝对平衡的二叉搜索树&#xff0c;其…

shell script中的数值运算declare和$((运算式 ))

linux中变量定义默认是字符串类型&#xff0c;如要进行数值运算&#xff0c;需要先声明变量类型&#xff0c;或者通过固定格式来计算 看案例 如果不通过固定格式&#xff0c;直接 echo 55 如图&#xff0c;结果显示的55本身 可以写成 declare -i var#声明变量integrate类型&…