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

相关推荐
寒寒_8 小时前
使用Vue与Fabric.js创建图片标注工具
javascript·vue.js·fabric
萧曵 丶15 小时前
Vue 中父子组件之间最常用的业务交互场景
javascript·vue.js·交互
Amumu1213816 小时前
Vue3扩展(二)
前端·javascript·vue.js
NEXT0616 小时前
JavaScript进阶:深度剖析函数柯里化及其在面试中的底层逻辑
前端·javascript·面试
牛奶18 小时前
你不知道的 JS(上):原型与行为委托
前端·javascript·编译原理
泓博18 小时前
Android中仿照View selector自定义Compose Button
android·vue.js·elementui
牛奶18 小时前
你不知道的JS(上):this指向与对象基础
前端·javascript·编译原理
牛奶18 小时前
你不知道的JS(上):作用域与闭包
前端·javascript·电子书
+VX:Fegn089518 小时前
计算机毕业设计|基于springboot + vue鲜花商城系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
pas13619 小时前
45-mini-vue 实现代码生成三种联合类型
前端·javascript·vue.js