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

相关推荐
戌中横12 小时前
JavaScript——Web APIs DOM
前端·javascript·html
Beginner x_u12 小时前
如何解释JavaScript 中 this 的值?
开发语言·前端·javascript·this 指针
HWL567912 小时前
获取网页首屏加载时间
前端·javascript·vue.js
速易达网络13 小时前
基于RuoYi-Vue 框架美妆系统
前端·javascript·vue.js
yinmaisoft14 小时前
JNPF 表单模板实操:高效复用表单设计指南
前端·javascript·html
37方寸15 小时前
前端基础知识(JavaScript)
开发语言·前端·javascript
Whisper_Sy15 小时前
Flutter for OpenHarmony移动数据使用监管助手App实战 - 应用列表实现
android·开发语言·javascript·flutter·php
json{shen:"jing"}15 小时前
1. 两数之和
前端·javascript·数据库
github.com/starRTC16 小时前
Claude Code中英文系列教程19:使用subagent子代理与创建自定义子代理【重要】
前端·javascript·数据库
hua_ban_yu16 小时前
vue3 + ts 制作指令,防止按钮在固定时间内重复点击,不会影响到表单的校验
前端·javascript·vue.js