vue2和el-input无法修改和写入并且不报错的解决方案
看过相关的很多内容，大部分集中在说需要添加$forceUpdate.而我根本不行。具体业务场景详见下文
一. 业务场景描述
在我所在的业务场景中。我嵌套了多层匿名子组件，用来展示某条数据的不同业务
如上图在基本情况简介中有数个属性表单。
我如下遍历
<el-table
v-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]" 这里存在多个问题：
vue规范中子组件不能直接被修改，保证了单向数据流，避免了数据的混乱与不可预测性。 但经测试是可以修改，但是无法回显罢了。建议不要这样做。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初始化。
到此这篇关于vue2和el-input无法修改和写入，并且不报错的文章就介绍到这了,更多相关vue2 el-input无法修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue实现导航栏菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了webpack中的optimization配置详解,主要就是根据不同的策略来分割打包出来的bundle,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性 ；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥2021-09-09
这篇文章主要为大家详细介绍了Vue2单一事件管理组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
数据拉取更新这个功能相信大家基本都见过，但是如果要做起来却不止如何做起，所以这篇文章给大家分享了vue.js通过自定义指令实现的方法，阅读本文需要对vue有一定理解，有需要的朋友们下面来一起看看吧。2016-10-10
这篇文章主要介绍了Vue3引入腾讯地图的相关资料,并实现点击地图添加标注的功能,示例代码提供了添加单个或多个标注的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了Vue3中使用i18n,this.$t报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
今天小编就为大家分享一篇element UI upload组件上传附件格式限制方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了laravel5.3 vue 实现收藏夹功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2018-01-01
最近项目停工了，RageFrame的学习暂时告一段落，这一篇给大家分享下有关单点登录的相关知识，并提供一些demo给大家参考，对vue单点登录的实现方式感兴趣的朋友一起看看吧2021-11-11
最新评论