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初始化。