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

相关推荐
用户5757303346241 分钟前
🔥 JavaScript 数组全攻略:从初始化到遍历,99% 的人都不知道的 let/var 陷阱!
javascript
lisypro11 分钟前
gin-vue-admin项目使用命令行进行启动
前端·vue.js·golang·gin
Ziky学习记录3 分钟前
深入理解 JavaScript 事件循环机制
前端·javascript
码云数智-园园10 分钟前
React Server Components 深度解析与实战应用:从原理到生产级落地指南
开发语言·前端·javascript
lyyl啊辉17 分钟前
5. pinia集中状态存储
vue.js
锅包一切18 分钟前
【蓝桥杯JavaScript基础入门】二、JavaScript关键特性
开发语言·前端·javascript·学习·蓝桥杯
光影少年9 小时前
浏览器渲染原理?
前端·javascript·前端框架
小白探索世界欧耶!~9 小时前
Vue2项目引入sortablejs实现表格行拖曳排序
前端·javascript·vue.js·经验分享·elementui·html·echarts
叫我一声阿雷吧11 小时前
JS实现响应式导航栏(移动端汉堡菜单)|适配多端+无缝交互【附完整源码】
开发语言·javascript·交互
程序员林北北12 小时前
【前端进阶之旅】节流与防抖:前端性能优化的“安全带”与“稳定器”
前端·javascript·vue.js·react.js·typescript