ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

Vue内嵌套层级过深,el-input改变值视图无响应

2026/8/30 18:59:04 拓冰建站 浏览量
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