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

相关推荐
前端Hardy20 分钟前
HTML&CSS:3D图片切换效果
前端·javascript
spionbo41 分钟前
Vue 表情包输入组件实现代码及完整开发流程解析
前端·javascript·面试
全宝42 分钟前
✏️Canvas实现环形文字
前端·javascript·canvas
金金金__44 分钟前
Element-Plus:popconfirm与tooltip一起使用不生效?
前端·vue.js·element
前端梭哈攻城狮1 小时前
uniapp图片上传添加水印/压缩/剪裁
前端·javascript·vue.js
天涯学馆1 小时前
前后端分离的 API 设计:技术深度剖析
前端·javascript·面试
爱编程的喵1 小时前
深入理解JavaScript原型机制:从Java到JS的面向对象编程之路
java·前端·javascript
独立开阀者_FwtCoder1 小时前
Cursor 1.0 重磅发来袭(毛骨悚然,开始学习你如何编码)
前端·javascript·github
五点六六六1 小时前
一些关于TreeShaking的AST的理解
前端·javascript·前端工程化
海盐泡泡龟2 小时前
“组件、路由懒加载”,在 Vue3 和 React 中分别如何实现? (copy)
前端·javascript·react.js