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

相关推荐
streaker3031 分钟前
多 IDE/Agent 环境下的 Skill 管理方案
前端·javascript·ai编程
进击的尘埃8 分钟前
Playwright Component Testing 深度拆解:组件挂载到底干了啥,视觉快照又怎么塞进 CI
javascript
OpenTiny社区33 分钟前
以界面重构文字,GenUI 正式发布!
前端·vue.js·ai编程
yuki_uix41 分钟前
深入理解 JavaScript 的 this:从困惑到掌握的完整指南
前端·javascript
学以智用1 小时前
Vue 3 项目核心配置文件详解
前端·vue.js
yuki_uix1 小时前
Promise 与 async/await:从回调地狱到优雅异步的演进之路
前端·javascript
Moment1 小时前
2026 趋势预测:Vibe Coding 之后,人人都会拥有专属 Agent 吗?
前端·javascript·后端
前端Hardy1 小时前
Bun 1.0 正式发布:JavaScript 运行时的新王者?启动快 5 倍,打包小 90%!
前端·javascript·面试
前端Hardy2 小时前
别再乱写正则了!一行 regex 可能让你的网站瘫痪 10 分钟
前端·javascript·面试
摸鱼的春哥2 小时前
【实战】吃透龙虾🦞,你写的Agent也能支持Skills渐进式披露
前端·javascript·后端