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

相关推荐
橘子星14 分钟前
深入理解 AJAX 中的 JSON 序列化与 JS 异步处理
前端·javascript·后端
夏幻灵23 分钟前
深度解析 JavaScript 异步编程:从回调地狱到 Promise 的重构
开发语言·javascript·重构
Cobyte37 分钟前
20.Vue Vapor 的应用初始化
前端·javascript·vue.js
vx-Biye_Design1 小时前
springboot安阳地区研学旅游服务小程序-计算机毕业设计源码12785
java·vue.js·windows·spring boot·tomcat·maven·mybatis
HYCS1 小时前
用pixi.js实现fabric.js(七):框选、ActiveObject和控制点
前端·javascript·canvas
云浪1 小时前
手把手教你用 fetch 读取 SSE 流,给 AI 聊天加上打字机效果
前端·javascript·vue.js
DJ斯特拉1 小时前
Tlias智能学习辅助系统(前端部分)
前端·javascript·学习
蜡台1 小时前
uni-indexed-list 之扩展组件实现城市列表带索引查询过滤功能
前端·vue.js·uniapp·uni-indexed
武清伯MVP12 小时前
前端跨域方案大合集
前端·javascript