文章讲述了在Vue应用中，如何解决v-for循环内或element组件中的el-input与复杂类型数据绑定时，输入值变化无法实时更新的问题。提供了使用`@input=change($event)`并结合`$forceUpdate()`、`JSON.parse(JSON.stringify())`以及使用`reactive`对象来管理数据结构的方法。
出现场景
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
扫一扫
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
