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

相关推荐
颜酱15 分钟前
差分数组:高效处理数组区间批量更新的核心技巧
javascript·后端·算法
Joker Zxc21 分钟前
【前端基础(Javascript部分)】2、JavaScript的变量和数据类型
开发语言·前端·javascript
颜酱3 小时前
前缀和技巧全解析:从基础到进阶
javascript·后端·算法
源码获取_wx:Fegn08953 小时前
计算机毕业设计|基于springboot + vue鲜花销售管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
岱宗夫up3 小时前
【前端基础】HTML + CSS + JavaScript 进阶(一)
开发语言·前端·javascript·css·html
PD我是你的真爱粉4 小时前
Vue Router 4 路由进阶
前端·javascript·vue.js
用户新4 小时前
V8引擎 精品漫游指南--Ignition篇(中) AST详解 字节码的生成
前端·javascript
岱宗夫up4 小时前
【前端基础】HTML + CSS + JavaScript 基础(三)
开发语言·前端·javascript·css·html
蓝帆傲亦6 小时前
Vue.js 大数据处理全景解析:从加载策略到渲染优化的完全手册
前端·vue.js·flutter
SuperEugene6 小时前
字符串处理实战:模板字符串、split/join、正则的 80% 用法
前端·javascript·面试