vue2和el-input无法修改和写入,并且不报错

文章目录

    • 一. 业务场景描述
    • 二. 原因分析
    • 三.解决方案
      • 3.1 方案一 原生标签(不建议)
      • 3.2 方案二 父子传递(不建议)
      • 3.3 方案三 vuex,pinia 状态传值(不建议)
      • 3.4 方案四 vue初始化属性 (建议)


看过相关的很多内容,大部分集中在说需要添加$forceUpdate.而我根本不行。具体业务场景详见下文

一. 业务场景描述

在我所在的业务场景中。我嵌套了多层匿名子组件,用来展示某条数据的不同业务

在这里插入图片描述
如上图在基本情况简介中有数个属性表单。
我如下遍历

    <el-tablev-loading="loading":data="xunchaDataList"@expand-change="expandRow"@selection-change="handleSelectionChange"><el-table-column type="expand"><template #default="props">.............<el-tab-pane label="基本情况简介" name="introduction"><template v-if="props.row.countryType === '村社区'">............<div v-if="String(props.row.country_introducts[item.key]).length <= 15"><el-input:readonly="isOnlyRead":placeholder="props.row.country_introducts[item.key]"v-model="props.row.country_introducts[item.key]"/></div></template><template v-else> 暂无数据</template></el-tab-pane></template></el-table-column></el-table>

上述内容中经测试,数据回显异常,程序不报错,无法显示输入变化,但是数据可以被正常修改。


二. 原因分析

v-model="props.row.country_introducts[item.key]" 这里存在多个问题:

  1. vue规范中子组件不能直接被修改,保证了单向数据流,避免了数据的混乱与不可预测性。 但经测试是可以修改,但是无法回显罢了。建议不要这样做。
  2. vue无法监听动态属性,country_introducts[item.key]是不可预测的,没有在vue初始化时和vue绑定,vue无法感知动态新增的属性变化。

三.解决方案

3.1 方案一 原生标签(不建议)

使用原生input等。他的机制和el-input略有不同。但也不建议。因为v-model="props.row.country_introducts[item.key]"仍然破坏了vue的单向数据流原则。

3.2 方案二 父子传递(不建议)

使用父子传递,通知父组件强制刷新。 但我的业务中可以发现,进行了多层匿名子组件嵌套。递交任务十分麻烦。

3.3 方案三 vuex,pinia 状态传值(不建议)

虽然可以通过这种方式让父子数据交互,但可以发现,子组件的v-model接收对象,和props.row的交互逻辑异常麻烦。

3.4 方案四 vue初始化属性 (建议)

业务中原本使用动态方式,
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

由于orginParams初始化为 originParams:{}.造成originParams被赋值时,属性均为动态型。
解决方案就是按照prop.row包含的属性。将originParams初始化。

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

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

相关文章

Java从入门到精通(十三)~ 枚举和注解

晚上好&#xff0c;愿这深深的夜色给你带来安宁&#xff0c;让温馨的夜晚抚平你一天的疲惫&#xff0c;美好的梦想在这个寂静的夜晚悄悄成长。 文章目录 目录 前言 一、枚举 1.1 枚举的概念 ​编辑 1.2 枚举的特点 1.3 枚举的实际运用 1. 状态机&#xff0c;描述属性的…

Nginx配置详解

1. Nginx安装 进入到/usr/local目录下&#xff0c;执行命令&#xff1a; yum install -y nginx通过如下命令启动nginx服务 systemctl start nginx通过如下命令&#xff0c;设置nginx开启自启动 systemctl enable nginxnginx默认占用80端口。 访问ip:80&#xff0c;可以看到…

Open3D 点云按xyz轴等距切片

目录 一、概述 1.1原理 1.2实现步骤 1.3应用 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2按x轴切片 3.3按y轴切片 3.4按z轴切片 Open3D点云算法汇总及实战案例汇总的目录地址&#xff1a; Open3D点云算法与点云深度学习案例汇总&#xff…

Java中线程池的基本使用

参考这个课程&#xff0c;讲的非常详细 27.线程池使用步骤总结_哔哩哔哩_bilibili 应用场景 商品秒杀 文件上传 订票系统 自定义线程池&#xff08;让我们了解底层逻辑的&#xff09; 构造方法 饱和机制 就是我们的队列饱和后我们该怎么处理 是拒绝这个任务还是啥…

Aria2 任意文件写入漏洞

目录 Aria2介绍漏洞描述漏洞复现 Aria2介绍 Aria2是一个在命令行下运行&#xff0c;多协议&#xff0c;多来源下载工具&#xff08;HTTP / HTTPS&#xff0c;FTP&#xff0c;BitTorrent&#xff0c;Metalink&#xff09;&#xff0c;内建XML-RPC用户界面。Aria提供RPC服务器&a…

流媒体服务器一:使用成熟的流媒体SRS 搭建 RTMP流媒体服务器

1 安装和测试srs流媒体服务器 服务器&#xff1a;SRS(Simple RTMP Server&#xff0c;⽀持RTMP、HTTP-FLV&#xff0c;HLS) 推流端&#xff1a;ffmpeg OBS 拉流端&#xff1a;ffplay VLC srs播放器 1.1 安装srs流媒体服务器 官网 SRS (Simple Realtime Server) | SRS 码…

18746 逆序数

这个问题可以使用归并排序的思想来解决。在归并排序的过程中&#xff0c;我们可以统计逆序数的数量。当我们合并两个已经排序的数组时&#xff0c;如果左边的数组中的元素&#xfffd;&#xfffd;于右边的数组中的元素&#xff0c;那么就存在逆序&#xff0c;逆序数的数量就是…

数据库之索引

目录 一、索引概述 1.索引的概念和特点 2.索引的分类 3.索引设计的原则 二、创建和查看索引 1.在创建表的时候创建索引 1.创建和查看普通索引 2.创建组合索引 3.创建唯一索引 4.创建全文索引 5.创建空间索引 2.在已有的表上创建索引 1.使用ALTER TABLE语句创建索引…

IEC104转MQTT网关支持MQTT对接Ignition、阿里云、华为云、亚马逊AWS、ThingsBoard、Zabbix平台助力远程管理

钡铼推出了一款专为电力系统设计的数据采集网关——IEC104转MQTT网关BE113&#xff0c;感兴趣的朋友接着往下看&#xff1a; 一、网关概述 IEC104转MQTT(Ignition)网关BE113是一款专为电力系统设计的数据采集网关&#xff0c;支持DL/T645和IEC104等协议的设备。上行支持MQTT协…

二、3 函数递归

自己间接或直接调用自己&#xff08;可大大减少代码量&#xff09; 1、举例 2、递归必须有停下来的条件 3、举例 普通求解数组长度 递归求解

16 敏捷开发实践(1)

敏捷方法&#xff1a;是一种从1990年代开始逐渐引起广泛关注的一些新型软件开发方法&#xff0c;是一种应对快速变化的需求的一种软件开发能力。 敏捷开发&#xff1a;是一种以人为核心、迭代、循序渐进的开发方法。 敏捷实践&#xff1a;精益软件开发&#xff08;LSD&#x…

iexcel-excel 大文件读取和写入-02-Excel 引导类简介

excel 系列 Excel Export 踩坑注意点导出方案设计 基于 hutool 的 EXCEL 优化实现 iexcel-excel 大文件读取和写入&#xff0c;解决 excel OOM 问题-01-入门介绍 iexcel-excel 大文件读取和写入-02-Excel 引导类简介 iexcel-excel 大文件读取和写入-03-ExcelField 注解介绍…

Java进制,进制的转换

目录 进制 进制介绍 案例演示 进制的图示 进制的转化&#xff08;基本功&#xff09; 二进制转换成十进制 八进制转换成十进制 十六进制转换成十进制 十进制转换成二进制 十进制转换成八进制 十进制转换成十六进制 二进制转换成八进制 二进制转换成十六进制 …

Linux信号上

信号 概念 信号是由于进程产生&#xff0c;但是由内核调度传递给另一个进程&#xff1a; 产生信号 按键产生信号: Ctrc --> 2)SIGINT(终止/中断) Ctrz --> 20)SIGTSTOP(终端暂停) Ctr\ --> 3)SIGQUIT(退出) 系统调用产生: kill(2), raise, abort软件条件产生: 如定…

泛型如何定义和使用?

根据使用的地方分为3种&#xff0c;分别是泛型类&#xff0c;泛型方法和泛型接口。 &#xff08;1&#xff09;泛型类 泛型类的定义 在类名的后面加一对尖括号&#xff0c;括号中填写类型参数&#xff0c;参数可以有多个&#xff0c;多个参数之间使用逗号分隔。 下面是一个…

从与原始的Transformer architecture比较来理解GPT

从与原始的Transformer architecture比较来理解GPT flyfish 一、Transformer architecture 先说名词 不同的文献和资料中有不同的名字&#xff0c;其实是一样的意思 1 编码器-解码器多头注意力机制&#xff08;Encoder-Decoder Multi-Head Attention Mechanism&#xff09; …

ASP.NET Core中上传文件

1.创建一个文件上传的表单 在一个视图中&#xff08;比如Index.cshtml&#xff09;&#xff0c;添加一个表单来让用户选择文件并上传。 model IFormFile <form method"post" enctype"multipart/form-data"> <div class"form-group"…

爬虫-实战爬取虎扑ACG帖子

要求如下: 爬取虎扑步行街 ACG 版面的数据,要求使用多线程来并发爬取。范围是第一页的所有帖子,每个帖子包含标题、主题内容和第一页的所有回复内容。最后打印出爬到的所有帖子的标题。 网址是:ACG圈 - 虎扑社区。 针对上面的要求,我们进行分析: 首先是要使用多线程范…

韩顺平0基础学java——第39天

p820-841 jdbc和连接池 1.JDBC为访问不同的数据库提供了统一的接口&#xff0c;为使用者屏蔽了细节问题。 2.Java程序员使用JDBC&#xff0c;可以连接任何提供了JDBC驱动程序的数据库系统&#xff0c;从而完成对数据库的各种操作。 3.jdbc原理图 JDBC带来的好处 2.JDBC带来的…

结构体笔记

结构体 C语言中的数据类型&#xff1a; 基本数据类型&#xff1a;char/int/short/double/float/long 构造数据类型&#xff1a;数组&#xff0c;指针&#xff0c;结构体&#xff0c;共用体&#xff0c;枚举 概念&#xff1a; 结构体是用户自定义的一种数据类型&#xff0c…