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

相关推荐
郝亚军1 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
an317423 小时前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
GitLqr3 小时前
Vue 3.6 Vapor Mode vs React 19 Compiler:前端架构的两条分叉路
vue.js·react.js·vapor
TeamDev4 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
整點薯條4 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
前端甜糖6 小时前
记录We码开发者工具的一个bug
前端·javascript
猫3286 小时前
echarts 日常问题解决
前端·javascript·echarts
不简说7 小时前
JS 代码技巧 vol.8 — 20 个函数式编程实战,把 if/else 拍扁的骚操作
前端·javascript·面试
Cobyte7 小时前
模板 DSL 解析器中的状态机设计
前端·javascript·vue.js
软件开发技术深度爱好者9 小时前
小学英语单词魔法学园HTML5实现
javascript·html5·英语学习