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 addRoutes路由动态加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文是主要介绍基于Vue的一个组件开发。本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧2016-11-11
这篇文章主要介绍了手写实现Vue计算属性，本文从一个简单的计算属性例子开始，一步步实现了计算属性。并且针对这个例子，详细分析了页面渲染时的整个代码执行逻辑，需要的小伙伴可以参考一下2022-08-08
这篇文章主要介绍了vue+elementUI下拉框回显问题及解决方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了vue更多筛选项小组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了在vue中实现动态设置元素的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了vue如何进行数据代理,通过本文学习我们了解如何代理的及验证两条线的问题，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
resetFields方法是Element Plus中el-form组件提供的一个非常有用的功能,它允许开发者轻松重置表单并移除校验结果,本文给大家介绍element-plus中的resetFields()方法,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要介绍了详解vue父子组件关于模态框状态的绑定方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章给大家介绍Vue中El-table列顺序的秘密：一步步实现默认显示功能,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2026-05-05
最新评论