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 分钟前
Flutter 框架跨平台鸿蒙开发 - 打造表情包制作器应用
开发语言·javascript·flutter·华为·harmonyos
摘星编程17 分钟前
React Native for OpenHarmony 实战:MediaPlayer 播放器详解
javascript·react native·react.js
TAEHENGV24 分钟前
React Native for OpenHarmony 实战:反应测试实现
javascript·react native·react.js
风叶悠然35 分钟前
vue3中数据的pinia的使用
前端·javascript·数据库
Jyywww1211 小时前
Uniapp+Vue3 使用父传子方法实现自定义tabBar
javascript·vue.js·uni-app
zhengxianyi5151 小时前
使用码云gitee登录ruoyi-vue-pro——坑比较多
前端·vue.js·gitee·ruoyi-vue-pro优化·三方登陆
光影少年1 小时前
React vs Next.js
前端·javascript·react.js
谢尔登1 小时前
Vue3 响应式系统——ref 和 reactive
前端·javascript·vue.js
天若有情6731 小时前
【JavaScript】React 实现 Vue 的 watch 和 computed 详解
javascript·vue.js·react.js
衫水2 小时前
Ubuntu 系统部署 Vue/Vite 应用到 Nginx
vue.js·nginx·ubuntu