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

相关推荐
swipe19 小时前
从 0 到 1 实现大文件上传:分片、秒传、断点续传、暂停、重试与服务端合并
前端·javascript·面试
kyriewen21 小时前
AI 生成的代码能跑就行?这 5 个坑迟早炸
前端·javascript·ai编程
kisshyshy21 小时前
🍦 雪糕、食堂、火车厢:三幅漫画吃透栈、队列与链表
javascript·算法
胡志辉21 小时前
从v8源码和react深入浅出理解 JavaScript 作用域链与闭包
前端·javascript
Bolt1 天前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
阳火锅1 天前
😭测试小姐姐终于不骂我了!这个提BUG神器太香了...
前端·javascript·面试
行者全栈架构师1 天前
UniApp集成vk-uview-ui组件库详解:打造高效UI开发体验
前端·vue.js
林希_Rachel_傻希希1 天前
js里面的proxy理解。以及vue3响应式数据设计底层
前端·javascript·面试
阿黎梨梨1 天前
AI Loop:告别“人肉写提示词”,让代码替你“鞭策”AI
javascript·人工智能
Csvn1 天前
Vue 3 defineModel 翻车实录:多个 v-model 绑定到底怎么写?
前端·vue.js