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

相关推荐
滕青山11 分钟前
腾讯域名拦截查询 在线工具核心JS实现
前端·javascript·vue.js
进击的尘埃28 分钟前
TypeScript 协变与逆变:你的泛型组件 Props 为什么总是类型报错?
javascript
helloweilei30 分钟前
javascript 结构化克隆
javascript·node.js
龙猫不热30 分钟前
从 0 手写 Promise:拆解 Promise 链式调用的实现原理
前端·javascript·面试
wuhen_n2 小时前
TypeScript 强力护航:PropType 与组件事件类型的声明
前端·javascript·vue.js
wuhen_n3 小时前
组件设计原则:如何设计一个高内聚、低耦合的 Vue 组件
前端·javascript·vue.js
独泪了无痕13 小时前
Vue调试神器:Vue DevTools使用指南
vue.js·前端工程化
优秀稳妥的JiaJi17 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架
Lee川17 小时前
深度解构JavaScript:作用域链与闭包的内存全景图
javascript·面试
好雨知时节t17 小时前
Pinia中defineStore的使用方法
vue.js