解决el-input视图不更新的问题！！！

最新推荐文章于 2025-06-05 11:39:56 发布

原创最新推荐文章于 2025-06-05 11:39:56 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

11 篇文章

订阅专栏

8 篇文章

订阅专栏

elementui

4 篇文章

订阅专栏

探讨了在Vue中遇到的数据更新问题，特别是在修改数组元素时遇到的挑战。通过尝试使用forceUpdate和set方法未能解决问题，最终采用深拷贝、清空并重新赋值的策略成功解决数据更新检测的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

限制图中输入框最大数量为1000
上图中的数据列表为：this.makeCardDData.list
this.makeCardDData.list =
[{amountTit: “50元面值”, count: 0},
{amountTit: “100元面值”, count: 0},
{amountTit: “200元面值”, count: 0},
{amountTit: “500元面值”, count: 0},
{amountTit: “1000元面值”, count: 0},
{amountTit: “2000元面值”, count: 0},
{amountTit: “5000元面值”, count: 0},
{amountTit: “10000元面值”, count: 0}]

当我要更改上面某一数值的时候，第一次生效，第二次以后就不生效了，又是试图不更新，所以，老办法试一下：
1。this. $f o r c e U p d a t e () / / 迫使 V u e 实例重新渲染 - - 》不好使 2 。 t h i s .$ set( this.makeCardDData.list[index],‘count’,1000) —》不好使

没得办法了：我觉得他试图不更新吧，就是没检测到，把表单重新渲染一下应该就可以了
于是：
深拷贝表单对象
this.makeCardDDataListCopy = Object.assign({},this.makeCardDData.list)
清空表单
this.makeCardDData.list = []
给表单重新赋值
this.$nextTick(()=>{
this.makeCardDData.list = Object.assign({},this.makeCardDDataListCopy)
})
//嗯，解决了