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

相关推荐
前端摸鱼匠36 分钟前
Vue 3 的defineEmits编译器宏:详解<script setup>中defineEmits的使用
前端·javascript·vue.js·前端框架·ecmascript
徐小夕1 小时前
我花一天时间Vibe Coding的开源AI工具,一键检测你的电脑能跑哪些AI大模型
前端·javascript·github
英俊潇洒美少年1 小时前
Vue3 企业级封装:useEventListener + 终极版 BaseEcharts 组件
前端·javascript·vue.js
方安乐3 小时前
单元测试之helper函数
前端·javascript·单元测试
灼灼桃花夭4 小时前
js之阳历 → 农历(含时辰)转换函数
开发语言·前端·javascript
小李子呢02114 小时前
前端八股性能优化(1)---防抖和节流
开发语言·前端·javascript
ayqy贾杰5 小时前
Claude Code 重构,并行化或终结 IDE 时代
前端·javascript·面试
tanis_36 小时前
MinerU JS/TS SDK 深度指南:JavaScript/TypeScript 开发者的 PDF/文档解析利器
javascript
颜酱6 小时前
智能体与工作流:从「想做一个应用」到「能跑通一条链」
前端·javascript·人工智能
槐序十七^6 小时前
某坤行md5__1101 请求头zkhs 分析
javascript·js逆向·python爬虫·md5__1101·sha1加密