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

相关推荐
Lee川26 分钟前
深入解析:从内存模型到作用域陷阱——JavaScript变量的前世今生
javascript·算法
豆苗学前端35 分钟前
彻底讲透医院移动端手持设备PDA离线同步架构:从"记账本"到"分布式共识",吊打面试官
前端·javascript·后端
paterWang1 小时前
基于SpringBoot+Vue的鞋类商品购物商城系统的设计与实现
vue.js·spring boot·后端
Esaka_Forever2 小时前
Promise resolve 的基础用法
前端·javascript
赵_叶紫3 小时前
Vue 3 从基础到组合式 API 全解析
vue.js
hypnos_xy4 小时前
Vue3 工程构建
vue.js·前端框架
csdn飘逸飘逸4 小时前
Autojs基础-控件操作
javascript
下北沢美食家4 小时前
Express框架入门
开发语言·javascript·express
毕设源码-钟学长4 小时前
【开题答辩全过程】以 基于Vue的租房App为例,包含答辩的问题和答案
前端·javascript·vue.js