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无法修改内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论