Vue内嵌套层级过深,el-input改变值视图无响应

出现场景

1.v-for内绑定复杂类型数据内部值,通过input更改其值时。 2.element表单或表格等组件内部,el-input绑定复杂类型数据内部值,通过input更改其值时。

解决思路

1.el-input加入

@input="change($event)"

...

import { getCurrentInstance } from "vue";

const { proxy, ctx:that } = getCurrentInstance()

const change = (e) => { that.$forceUpdate(); }

2.如果不行,改进change方法

const change = (e) => {

let a = JSON.parse(JSON.stringify(dataLists))

dataLists = a;

that.$forceUpdate();

}

3.还不行,改进dataLists结构

let dataLists = reactive({ data: [] });

所有引用地方改为dataLists.data

相关推荐
gjwjuejin9 小时前
前端埋点不头秃:从打点代码到数据分析的完整实战
javascript
Schafferyy9 小时前
【vue3】Form表单重置不生效
javascript·vue.js
星恒随风10 小时前
四天学完前端基础三件套(JavaScript篇)
开发语言·前端·javascript·笔记
杜子不疼.11 小时前
【 C++ AI 大模型接入 SDK】 - 日志模块
开发语言·javascript·c++
Dxy123931021611 小时前
如何使用jQuery获取一类元素并遍历它们
前端·javascript·jquery
likerhood12 小时前
Java 访问修饰符:public、protected、private讲解
java·开发语言·javascript
刀法如飞12 小时前
JavaScript 数组去重的 20 种实现方式,学会用不同思路解决问题
前端·javascript·算法
__log13 小时前
Vue 3 核心技术深度解析:从“会用API“到“懂原理、能表达“
前端·javascript·vue.js
Asurplus13 小时前
【VUE】16、使用 wangEditor 富文本编辑器
vue.js·图片上传·wangeditor·富文本编辑器