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

相关推荐
Highcharts.js6 分钟前
矩形树图Treemap布局算法深度解析:基于Highcharts实现带层级交互的矩形树图
javascript·交互·开发文档·treemap·highcharts·图表类型·矩形树图
一只大侠的侠9 分钟前
React Native for OpenHarmony:日期选择功能完整实现指南
javascript·react native·react.js
Zhencode9 分钟前
vue3运行时核心模块之runtime-dom
前端·javascript·vue.js
henry10101012 分钟前
DeepSeek生成的网页版念经小助手
javascript·css·html5·工具
一只大侠的侠13 分钟前
React Native实战:高性能StickyHeader粘性标题组件实现
javascript·react native·react.js
打瞌睡的朱尤23 分钟前
Vue day13~16Vue特性,Pinia,大事件项目
前端·javascript·vue.js
大数据基础37 分钟前
基于 Hadoop MapReduce + Spring Boot + Vue 3 的每日饮水数据分析平台
大数据·vue.js·hadoop·spring boot·数据分析·maven·mapreduce
_OP_CHEN38 分钟前
【前端开发之JavaScript】(三)JS基础语法中篇:运算符 / 条件 / 循环 / 数组一网打尽
开发语言·前端·javascript·网页开发·图形化界面·语法基础·gui开发
Aric_Jones9 小时前
JavaScript 从入门到精通:完整语法指南
开发语言·javascript·ecmascript
西门吹-禅12 小时前
文本搜索node js--meilisearch
开发语言·javascript·ecmascript