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

相关推荐
松树戈15 分钟前
JS推荐实践
开发语言·javascript·ecmascript
vener_22 分钟前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录34 分钟前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
计算机毕设孵化场1 小时前
计算机毕设-基于springboot的多彩吉安红色旅游网站的设计与实现(附源码+lw+ppt+开题报告)
vue.js·spring boot·后端·计算机外设·课程设计·计算机毕设论文·多彩吉安红色旅游网站
小王码农记1 小时前
vue中路由缓存
前端·vue.js·缓存·typescript·anti-design-vue
战神刘玉栋1 小时前
《SpringBoot、Vue 组装exe与套壳保姆级教学》
vue.js·spring boot·后端
乐闻x1 小时前
Vue实践篇:如何在 Vue 项目中检测元素是否展示
前端·javascript·vue.js
理想不理想v2 小时前
【经典】webpack和vite的区别?
java·前端·javascript·vue.js·面试
聊无生2 小时前
JavaSrcipt 函数高级
开发语言·前端·javascript
好开心333 小时前
javaScript交互案例2
开发语言·前端·javascript·html·ecmascript·交互